Best Image Size for Mobile Devices

Report · Oct 30, 2022

Hi,

What is the best/proper image size for mobile devices? Viewport, Screen Resolution, DPR, PPI... It can be a bit confusing and overwhelming. I've seen some tutorials recommend 400px, and others 800px. I want to ensure that the images look crisp when viewed on cell phones or something similar.

Thanks for any help you can provide.

Kind regards,

Mark

Report · Oct 30, 2022

What is the best/proper image size for mobile devices?

=========

How long is a piece of string?

See <picture> tag with SRCSET.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

The higher the pixels the more information the image will contain which will take longer for it to download not to mention the users bandwidth will suffer, so you most probably want to use an image for mobile which takes this into consideration.

Use srcset to deliver different images to different devices is the correct workflow. When I can be bothered, which is not always, l tend to use 800px for tablet and 480px for smartphone, for desktop you can use what you like 1500-2000px if you have a large hero image running from one side of the screen to the other.

Optimise the images when exporting from your image editing software to create less weighty results. There are no hard and fast rules as its a bit hit and miss depending on the information contained in the images color space, try a few export settings to see what gives you the best results.

Report · Oct 30, 2022

I will only add that a 15-20% quality JPEG will load much faster and look fine on standard displays, but it will have visible artifacts on high-DPI/Retina displays. The <picture> tag with srcset bridges these problems.

Photoshop > File > Export > Export As > supports exporting JPGs @ 1x, 2x, 3x sizes.

GIF is practically a zombie file type now. WebP is a better option as it supports lossy, lossless and alpha-transparency with file compression thats 25-34% smaller than other pixel-based image files.

https://developers.google.com/speed/webp

For non-photographic web graphics, use Illustrator and export to math-based SVG. Scalable Vector Graphics are device independant meaning they are re-scalable to any size required without sacrificing quality or increasing bandwidth.

For this reason, SVG for web icons, fonts and flat colored images are preferred over pixel-based JPG, PNG or WebP.

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

Hi Nancy,

What about .avif files? I converted several of my jpg images to .avif files using this service, https://convertio.co/ , and found it reduced file size on average by 50-65% with no visual degradation in image quality. I realize not all browsers support .avif files, but if there is a way to include a jpg file to fall back on, it might be the best option.

Kind regards,

Mark

Report · Oct 31, 2022

Hi Nancy,

What about .avif files?

==========

Mark,

I agree with @L e n a about AVIF. It's a few more years away. 73% is still experimental. On the other hand, WebP has 100% support from all modern browsers which is what most people use. And Photoshop now allows you to SaveAs WebP but not AVAIF.

For now, use the major supported file types:

SVG for vectors;
JPG, PNG or WebP for rasters;
WebP for animations.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 02, 2022

Hi Nancy,

As always, thanks for your help.

I converted a jpeg image into AVIF and WEBP files, and here are the results.

jpeg - 344 KB
webp - 301 KB
avif - 118 KB

As you can see, there is no comparison. 73% isn't as good as 97%, but I think the support is high enough to include them.

Does it matter how you have the images structured within the <PICTURE>? On the recommended link (https://www.contentful.com/blog/load-avif-webp-using-html/ ), the image files are grouped by file type, as seen below (first AVIF, then WEBP, etc.). Can you have them listed by image size, like this? Will that work?

Report · Oct 30, 2022

Hi,

Thanks to everyone for your comments.

I am using srcset to deliver different images to different devices. Most of my images are at most 900 pixels in width. You suggested 480px for smartphones, so that is the dimension I will use. I have seen suggestions ranging from 400-800px, so I just wanted to be sure.

Thanks.

Mark

Report · Oct 30, 2022

I would try the same image at 4-6 different sizes in possible range and see which looks best and then go with those pixel dimensions. It starts as trail and error to get it to a perfect size.

Report · Oct 30, 2022

I would try the same image at 4-6 different...

By @Daniel Kramer

===========

Just use generic placeholders. That's what they're for.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

What about .avif files? I converted several of my jpg images to .avif files using this service, https://convertio.co/ , and found it reduced file size on average by 50-65% with no visual degradation in image quality. I realize not all browsers support .avif files, but if there is a way to include a jpg file to fall back on, it might be the best option.
By @Fun Seeker

As you have noticed, all the browsers are not yet up to date on the formats that allow to reconcile weight and quality...

AVIF - https://caniuse.com/avif
WEBP - https://caniuse.com/webp

With the aim of optimizing the flow of images that must be served to the various requests, as recommend @Nancy OShea in her first comment, the use of the PICTURE tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture remains an essential means, which moreover is very flexible to use.

PICTURE - https://caniuse.com/picture
SRCSET - https://caniuse.com/srcset

In this sense, rather than reducing the explanation here on this forum, I can only advise you the excellent article of Salma Alam-Naylor on Contentful, https://www.contentful.com/blog/2021/11/29/load-avif-webp-using-html/ which details the use of the PICTURE tag in order to serve highly optimized formats on browsers that offer this support, while serving older formats and compatible on other browsers. (chapter - How to serve responsive images with AVIF in supported browsers using the HTML <picture> tag chapter)

Report · Oct 30, 2022

Yes that nad webp are perfect formats for small image sizes. You can use Shortpixel or something like it to automate the process of making your images small in file size.

Report · Oct 31, 2022

Yes , @Daniel Kramer I completly agree with you, you’re right, bentch converter are very interesting, and necessary when working on distributing different source format….

So beside Shortpixel, I will complete by:

- Dev Converter that propose an API, https://devconverter.com/ just think that premium is needed starting from 10 items

- and Freeconvert has also a very nice API https://www.freeconvert.com/, but currently just propose WebP.. not yet AVIF… anyway stay tuned...API is anyhow premium from first item generated

Personnaly I used this one, sometimes ago, for others purpose than images and it was very flexible and efficient... long time that I didn't used it now.

Now if one prefer handle everything from our own environement… thought if one’re on Windows, Powershell cand handle the job quite nicelly…this article is well presented, and help everyone to directly focus on right place to go... https://www.squirrellogic.dev/articles/how-to-batch-convert-webp-and-avif-images-powershell/,

Personnaly I still prefer using Node that can integrate others tasks in process, large that just converting images format,

- Sharp is pretty nice and complete https://github.com/lovell/sharp ...

- Command line https://github.com/lovell/avif-cli …and https://github.com/Yukioru/cwebp-cli... can be helpfull in vertical usecases

- Anyway, also plenty npm and solutions outhere…https://npm.io/

Best Image Size for Mobile Devices

4 Correct answers