Skip to content

Commit

Permalink
Update documentation/docs/40-best-practices/07-images.md
Browse files Browse the repository at this point in the history
  • Loading branch information
benmccann committed Mar 15, 2024
1 parent 943989a commit 52ba694
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion documentation/docs/40-best-practices/07-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,5 +150,5 @@ CDNs can generally be used without any need for a library. However, there are a
- For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority="high" loading="eager"` to prioritize loading as early as possible.
- Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you.
- Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this.
- When used in `sizes` or `@media` queries, `em` and `rem` are both specced to mean the user's default `font-size`. For a `sizes` decalaration like `sizes="(min-width: 768px) min(100vw, 108rem), 64rem"`, the actual `em` or `rem` that controls how the image is laid out on the page can end up different if your CSS changes it. This means one should not change the default size of `em` if they want to give the image preloader truthful information. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.
- Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes="(min-width: 768px) min(100vw, 108rem), 64rem"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.

0 comments on commit 52ba694

Please sign in to comment.