Inspiring

Answered

Best Image Size for Mobile Devices

Forum|Forum|3 years ago
October 30, 2022
4 replies
22686 views

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

This topic has been closed for replies.

Correct answer L e n a

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/

L

L e n a

Community Expert

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)

D

Daniel Kramer

Community Expert

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.

L

L e n aCorrect answer

Community Expert

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/

D

Daniel Kramer

Community Expert

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.

Nancy OShea

Community Expert

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

O

osgood_

Brainiac

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.

Nancy OShea

Community Expert

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

F

Fun SeekerAuthor

Inspiring

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.

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?

Nancy OShea

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded