First batch of images picture tag

[NeOMakinG]

Questions	Answers
Description?	We wants to switch images to picture tags and support webp and avif for 8.1
Type?	improvement
BC breaks?	no
Deprecations?	no
How to test?	Images should work as expected, double density screens should receive 2x sizes
Possible impacts?	Images

[Hlavtox]

Quick check

[Hlavtox]

We need to use loading="eager" on the first image. It will be FCP element that we need to load ASAP. It would maybe be also good to add a preload element to header so it starts loading right away.

Something like:

<link rel="preload" as="image"
  imagesrcset="{$product.cover.bySize.medium_default.url} 452w,
  {$product.cover.bySize.pdt_180.url} 180w,
  {$product.cover.bySize.pdt_300.url} 300w,
  {$product.cover.bySize.pdt_360.url} 360w,
  {$product.cover.bySize.pdt_540.url} 540w,
  {$product.cover.bySize.pdt_590.url} 590w"
  imagesizes="(min-width: 1300px) 590px, (min-width: 768px) 50vw, 100vw"
  href="{$product.cover.bySize.medium_default.url}">

[NeOMakinG]

Leaving the comment opened for the preload if we want to implement it

[SharakPL]

I'm not sure this is the right way. IMO names should be specific to the target: product_main, product_zoom, product_miniature, product_cart, category_main for the baner on category page, category_miniature, etc. and all responsive versions should be generated automatically, with widths configured in theme's configuration module. Naming should be common for all themes, not just for this one. The same for responsive versions: _xs, not _320

[Hlavtox]

@SharakPL Well, the point is, that the images are usable on multiple places sometime.

Our notes are something like this:

Product
- 120x120 px for thumbnails
- 200x200 for mobile listing
- 320x320 for desktop listing
- 400x400 for mobile listing 2x
- 720x720 for product detail
- 1440x1440 for 2x product detail
Category thumbnail (subcategories)
- 80x80
- 160x160 for 2x
- 320x320 for 3x
Category cover
- 1000x1000
- 2000x2000 for 2x
Manufacturer - used on product page and in manufacturer listing
- 100x100
- 200x200 for 2x
Suppliers
- 100x100
- 200x200 for 2x
Stores
- 200x200
- 400x400 for 2x

[SharakPL]

Of course some common sizes could be kept eg. default_100 or default_200. I doubt they'll ever change in any theme, But what if I want to use 450x600 image for product miniature (main product image would be eg. 750x1000) and 350x150 on category miniature? It can't be done here because they all use default_320. Even if I wanted to use the same size for both, but eg. 400x400 it would still have to be named default_320 because that's what the theme uses in the templates. That's why we should change naming convention for the thumbs.

Category cover

• 1000x1000
• 2000x2000 for 2x

And what's with these huge category covers? It's supposed to be wide banner, not huge square covering whole screen #49

[NeOMakinG]

@Hlavtox I guess @SharakPL is right, we should name it differently so if someone change the size, he won't need to use a default_200 name if it's now 300

[NeOMakinG]

If anyone from the maintainer/committer team wants to commit something or work on that naming, feel free, otherwise I'll do it later

[Hlavtox]

Yeah I would also do some sensible names. ;-)

[Hlavtox]

Looks good! Let's get this merged!

Every changes have been addresses