Skip to content
This repository was archived by the owner on Mar 14, 2024. It is now read-only.
This repository was archived by the owner on Mar 14, 2024. It is now read-only.

Preload images articles does not mention dealing with webp/avif/jxl image formats #6150

@andrerom

Description

@andrerom

Is your feature request related to a problem? Please describe.

  1. Lighthouse rightfully suggest to provide alternative modern image formats like webp/avif/.. of images to cut size and improve web site/app performance for modern browsers
  2. Image in question is, or should also be preloaded (E.g. Hero image set as CSS background + preload)
  3. Article by @yoavweiss has no info on how to deal with preloading images when handling several formats, or status of support for it

Given AVIF/JXL is coming, providing multiple image formats for best web performance is only going to become more common, so article should somehow address this use case as it is quickly becoming best practice.

Describe the solution you'd like
From what I can gather preloading can't be done for cases like this yet, so what the article could do is:

  1. Own section for "Preloading multiple image formats?"
  2. Short section on status of this, possible links to ongoing work and suggestions for what to do in the meantime

I guess the best here for now would be to recommend users to avoid using images in external CSS file, and as support for image-set() is limited* avoid solving this with CSS at all for now. Instead as a pragmatic workaround, not use preload but inline in html as <picture> so browser can decide on image as soon as possible without having to wait for loading CSS and other assets first.

* type() not supported by Safari yet, and Chromium has several other limitations: https://caniuse.com/?search=image-set

Metadata

Metadata

Assignees

Labels

P2A normal priority task. This is the default for most issues.contentIssues related to contentcontent updatefor issues that do not require new content (only for updates to existing content)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions