0

I want to use tag and 3 image formats. avif \ webp \ png. At the same time, but not to forget about retina displays.

At the moment I came up with something like this format:

<picture>
    <source srcset="components/header/img/logo.avif, components/header/img/logo@2x.avif 2x" type="image/avif">
    <source srcset="components/header/img/logo.webp, components/header/img/logo@2x.webp 2x" type="image/webp">
    <img class="someClass" src="components/header/img/logo.png" srcset="components/header/img/logo@2x.png 2x" alt="Logo">
</picture>

But how much of this is correct ? Maybe it should be implemented in some other way ?

Crus
  • 119
  • 7

3 Answers3

2

You can combine both concepts via an art-direction rule.

The art direction concept is basically intended to switch between different image versions with different aspect ratios depending on your viewport size.

Example from german web studio "kulturbanause":

<picture>
  <source media="(min-width: 56.25em)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 56.25em)" srcset="large.jpg">

  <source media="(min-width: 37.5em)" srcset="medium.webp" type="image/webp">
  <source media="(min-width: 37.5em)" srcset="medium.jpg">

  <source srcset="small.webp" type="image/webp">
  <source srcset="small.jpg">
  <img src="fallback.jpg" alt="">
</picture>

Use svg if feasible (logos, info graphics etc)

Referring to your code example referencing a logo img:
Most likely, your logo could be used as a svg.
If it's created (or optimized) well, you don't need any HiRes candidates. (and most likely svg will also wipe the floor with raster images regarding filesize)

See also: MDN Docs: Responsive images

herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
1

While the standard HTML <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version.

<picture>
   <source srcset="diagram.svg" type="image/svg+xml">
   <source srcset="diagram.png" type="image/png">
   <img src="diagram.gif" width="620" height="540"
   alt="Diagram showing the data channels">
</picture>

More info developer.mozilla.org

I hope I was helpful

Sergiu
  • 356
  • 2
  • 10
  • yea, i understand this. Bot i don't understand how to right use pictures with different images format and srcset for retina together ) – Crus Feb 09 '22 at 23:24
  • 1
    https://www.mediaevent.de/html/srcset.html#:~:text=%3Cdiv%20class%3D%22container,Viewports%20laden%22%3E%0A%3C/div%3E – Sergiu Feb 09 '22 at 23:29
  • in this case we use only one type of image ) But i need use 3 types (png|jpg + avif + webp) and x1\x2 images for retina display ) – Crus Feb 09 '22 at 23:47
  • 1
    sorry I didn't find an answer – Sergiu Feb 09 '22 at 23:58
  • thx for help :) May be some one on stackoverflow know the answer or worked similar case ) – Crus Feb 10 '22 at 00:06
1

In the end I got a design that works with both image switching to source (we can get avif\webp for browsers that support it) and srcset which allows us to output x1 or x2 images for different displays.

path to files only for example :)

<picture>
    <source srcset="components/features/img/icon-5.avif 1x, components/features/img/icon-5@2x.avif 2x" type="image/avif">
    <source srcset="components/features/img/icon-5.webp 1x, components/features/img/icon-5@2x.webp 2x" type="image/webp">
    <img class="someClass" src="components/features/img/icon-5.png" alt="Icon" srcset="components/features/img/icon-5.png 1x, components/features/img/icon-5@2x.png 2x">
</picture>
Crus
  • 119
  • 7