Correct size of pictures for mobile and desktop

Hello everyone!:grinning:
I’m wondering what are the correct sizes for pictures on the web.

As far as I know,
-mobiles: pictures should have at least the width of the viewport but more is better otherwise users can’t zoom in.
How many pixels more?:thinking:
-desktop: if you want to use a picture full screen, things are as said before.
For smaller pictures: at least 1200-1600 px at 72 ppi (?)

But what about HD screens???
Should I choose different picture’s size for them? I guess so. Then I’ll need to check what are the sizes of most popular HD screens?
I think I got confused because of the difference between viewports’s sizes and screens’s definition (I’m not talking about screen’s resolution obviously).:thinking::sweat_smile:
Can anyone be so kind to cast a light on this topic?:sweat_smile::sweat_smile:
Thank you very much!!! :smiley:

Interesting question.

For the precise size of a image there are no specific rules other than: “If its slow its probably to big.”

I think the ideal solution would be to save the image 3 times.

  • 1st will be the original.
  • 2nd will be the copy used for the website. This one will probably be smaller in size than the original.
  • 3rd will be a copy used for mobile. This one will be even smaller than the second one in size.

This is afcourse not lmited to three images. You could for example add a thumbnail if this is needed.

You could create a function that creates these extra copies on uploading the image.

You could also use for example cloudinary as an image host which has these functionality already.

Some more information on this is found here.

Hope its helpful.

Hi @biirra and thank you so much for your answer! It is useful. :smiley:
And… Wow! That cloudinary looks fantastic! Probably it’s even too much at the moment, but I’m glad you pointed it out.
Thank you!