Image Resolution

What is the meaning of image resolution?

Seo content

Set up Image Resolution

 

You should never use an image suited for a desktop screen for a mobile device: for each device, use an appropriately fitted image.

You can use various services that can help you.

For example:

  • sharp npm package: use it as a Node script. In a divided script of your project save the code below and later run it to transform the images:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => { sharp(`${directory}/${file}`)
   .resize(200, 100) // width, height
   .toFile(`${directory}/${file}-small.jpg`);
 });
  • ImageMagick: in the command codes below, that you need to run in your terminal, you will see how to resize an image to 50% of its original size and how to resize an image to adapt within 400px wide by 300px high.

50% resize

convert -resize 50% flower.jpg flower-small.jpg

400px wide - 300px high

# macOS/Linux
convert flower.jpg -resize 400x300 flower-small.jpg
# Windows
magick convert flower.jpg -resize 400x300 flower-small.jpg

Try to create at least 3 to 5 various size of each image.

Attributes for multiple image versions

There are 3 basic attributes to use:

  • “src”

This attribute works for all that browsers that do not support the attributes “srcset” and “sizes”.

  • “srcset”

This attribute provides a comma-separated list of image filenames with width and density descriptors.

  • “size”

This attribute specifies the wideness of an image when it needs to be displayed; the browser links this information with information about the device of the user to choose which image to load.

Example

<img src="dice-large.jpg" srcset="dice-small.jpg 480w, dice-large.jpg 1080w" sizes="50vw">

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page