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">