8

After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.

My case: I have almost all my images using width 100% and height to auto, and the image containers had dynamic size, for example 30vw, or 40%, etc. (not sure if in this case I still need to set height and width values in the img tag)

What I need to use if I want to provide different sizes for my images and webp format as well and leave the decision to the browser what to choose?

Can I provide webp image without picture and source tag? Can I use the picture method and still let the browser choose what image shown?

Not sure either why we need to choose the fallback with simple img src for the smallest image, in that case if someone enter with IE and a big screen then the image will be always pixeled. In those cases I'd prefer make some users wait a little longer than provide them with a low resolution image. Also.. having a low resolution image with the fallback option, not sure how influences in the individual image seo ranking.

AngelLestat
  • 127
  • 2
  • 7
  • http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript This SO question shows you how to detect various platform and browser details. Based on that, you could use different CSS classes for your pictures. – BitTickler Sep 04 '16 at 20:20
  • yeah, but I guess the most semantic, correct and seo oriented would be to use the standard tags for that purpose. I try to avoid javascript if I can. I love clean solutions. Also, I dont want to force a browser to do something, that is one of the issues that picture method seems to have, still not sure if that depends on how we set the picture parameters – AngelLestat Sep 04 '16 at 22:17

1 Answers1

16

Your description looks like a common use case for responsive images. If you have for example an image that is shown at 50% width on large screens and at 100% width on viewports smaller than 900px, your HTML could look like this:

<picture>
    <source
        type="image/webp"
        sizes="(min-width: 900px) 50vw, 100vw"
        srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
    >
    <img
        sizes="(min-width: 900px) 50vw, 100vw"
        srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
        src="image-1000.jpg"
    >
</picture>

This way browsers that support <picture> and webp images select one of the image-*.webp files, browsers that support srcset and sizes select one of the image-*.jpg files and all other browsers show the image-1000.jpg.

The most important part with this technique is to specify the sizes attribute correctly so browsers can make good decisions which image to load. You can find more information about it here: https://ericportis.com/posts/2014/srcset-sizes/

The image you want to display on “old” browsers can be freely selected via the src attribute. Or you “polyfill” the feature via JavaScript with tools like Picturefill or respimage.

You can omit the <picture> and <source> elements and do the type switch on the server side via HTTPs Accept header as an alternative.

ausi
  • 7,253
  • 2
  • 31
  • 48
  • Sorry for the delay in the answer, I had a very busy day. Thanks for answer and the link, that is a long explanation but more complete. So, with this method the browser is not forced to choose certain picture dimension, it makes its own desicion, not like all pages said that if you use picture then we force the selection.., is that right? – AngelLestat Sep 07 '16 at 03:20
  • With this method the browser is forced to choose the first `srcset` if it supports the type `image/webp`, otherwise it is forced to choose the second `srcset`. But which image gets selected within the `srcset` attribute is up to the browser. – ausi Sep 07 '16 at 06:47
  • Thanks.. that is exactly what I wanted. – AngelLestat Sep 07 '16 at 17:42
  • You’re welcome. If you like the answer, feel free to upvote it ;) – ausi Sep 07 '16 at 20:29
  • 1
    I cant, I am still a newbie in stackoverflow, I need 50 points in reputation for that. – AngelLestat Sep 08 '16 at 23:38
  • Why would you want the browser to choose between two sizes when you have more than 2 thumbnails in your `srcset`? Also, why do you use `` just for `webp` and not for `jpeg`? How would the `webp` be used if never specified anywhere else? – Dimitri Kopriwa Dec 29 '20 at 13:35
  • Both size declarations are using the `vw` unit which means they depend on the viewport of the browser. So they are actually not two distinct sizes but many many more (theoretically infinite). `` can be seen als the last `` of the `` element. If no one of the ``s match the `srcset` is taken from the ``. – ausi Jan 04 '21 at 23:31