• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Best Image Size for Mobile Devices

Contributor ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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

TOPICS
How to , Performance , Publish

Views

6.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 4 Correct answers

Community Expert , Oct 30, 2022 Oct 30, 2022
quote

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

 

Votes

Translate

Translate
LEGEND , Oct 30, 2022 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 lar

...

Votes

Translate

Translate
Community Expert , Oct 30, 2022 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.

PS-export2x.jpg

 

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 ima

...

Votes

Translate

Translate
Community Expert , Oct 31, 2022 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

...

Votes

Translate

Translate
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

quote

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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.

PS-export2x.jpg

 

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.

 

image.png

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

quote

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

LATEST

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?

 

<picture>
<source media="(max-width: 600px) srcset="../../images/picture1.avif">
<source media="(max-width: 600px) srcset="../../images/picture1.jpeg”>
<source media="(max-width: 800px) srcset="../../images/picture2.avif">
<source media="(max-width: 800px) srcset="../../images/picture2.jpeg”>
<source media="(max-width: 1200px) srcset="../../images/picture3.avif">
<source media="(max-width: 1200px) srcset="../../images/picture3.jpeg”>
</picture>

 

 

<picture>
<source
type="image/avif"
srcset="
https://images.ctfassets.net/.../img.png?q=75&w=500&fm=avif 500w,
https://images.ctfassets.net/.../img.png?q=75&w=900&fm=avif 900w,
https://images.ctfassets.net/.../img.png?q=75&w=1300&fm=avif 1300w,
https://images.ctfassets.net/.../img.png?q=75&w=1700&fm=avif 1700w,
"
sizes="(max-width: 735px) 100vw, 736px"
/>
<source
type="image/webp"
srcset="
https://images.ctfassets.net/.../img.png?q=75&w=500&fm=webp 500w,
https://images.ctfassets.net/.../img.png?q=75&w=900&fm=webp 900w,
https://images.ctfassets.net/.../img.png?q=75&w=1300&fm=webp 1300w,
https://images.ctfassets.net/.../img.png?q=75&w=1700&fm=webp 1700w
"
sizes="(max-width: 735px) 100vw, 736px"
/>
<img
srcset="
https://images.ctfassets.net/.../img.png?q=75&w=500 500w,
https://images.ctfassets.net/.../img.png?q=75&w=900 900w,
https://images.ctfassets.net/.../img.png?q=75&w=1300 1300w,
https://images.ctfassets.net/.../img.png?q=75&w=1700 1700w
"
sizes="(max-width: 735px) 100vw, 736px"
src="https://images.ctfassets.net/.../img.png"
alt="Some great alternative text"
loading="lazy"
decoding="async"
width="2032"
height="1076"
/>
</picture>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

quote

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


By @Daniel Kramer

===========

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

<img src="https://dummyimage.com/1200x400/"><br>

<img src="https://dummyimage.com/900x300/"><br>

<img src="https://dummyimage.com/600x200/"><br>

<img src="https://dummyimage.com/300x100/"><br>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

quote

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)

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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/

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines