Choosing Between Smallest Size Image For Quick Load vs. High Def Image for Retina Display

Question

I'm in a bit of a conundrum between deciding to serve images only in necessary width (using srcset) or to serve the images twice as big so that it will look good on Retina display.

We all want our webpage to look their best. Especially for those who deal in graphics or photography. And yet we also have to be wise about traffic bandwith. We want to be considerate about those using only WiFi. If they have to wait longer for it to load, they'd leave. I've also read that Google favor webpages that are lighter in their ranking.

But nothing is worse than to see your webpage looks blurry on Retina or HD devices. Especially nowadays where more and more people access the informations through their phones and in my industry, most are Macbook users. Right now my srcset looks like this:

<img
  srcset="img/large-image-1920w.jpg  1920w,
          img/medium-image-1600w.jpg  1600w,
          img/small-image-1024w.jpg  1024w"
  sizes="100vw"
  src="img/small-image-1024w.jpg" />

And code for my thumbnails (I'm using Bootstrap that's why at 768w, I choose the 960w image thinking that it will look better on phones):

<div class="col-xs-12 col-sm-4">    
 <img 
   srcset="img/thumbnail-960w.jpg  1920w,
           img/thumbnail-640w.jpg  1200w,
           img/thumbnail-960w.jpg  768w"
   sizes="100vw" 
   src="img/thumbnail-328w.jpg" />
</div>

The images are set to fill 100% entire width of the browser. Three thumbnails appear on each row.

If Retina display require 2x pixel density to be displayed in an appropriate size (e.g. A 400px by 400px image will displayed as 200px by 200px), will my webpage only looks good on 960w browser? That's ridiculously small.

For iPhones, I guess since their physical dimension is also small, they can still access the medium-image-1600w if necessary.

Any suggestions?

M Thomas M Thomas · Accepted Answer · 2017-05-16T07:09:19

The above code looks fine for different screens.

The same you can try with tag, there we have media attribute for checking resolution.

<picture>
  <source media="(min-width: 650px)" srcset="img_650.jpg">
  <source media="(min-width: 465px)" srcset="img_465.jpg">
  <img src="img_default.jpg" alt="something" style="max-width:auto; width: auto">
</picture>

Hope this would help you.

Choosing Between Smallest Size Image For Quick Load vs. High Def Image for Retina Display

1 Answers