mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
CLS: Declare original image dimensions in HTML
Reduce Cumulative Layout Shift (CLS) by declaring original image dimensions in HTML before re-scaling with CSS. This tells browsers the image's aspect ratio before the image and the stylesheet load, allowing browsers to block out space accordingly to avoid making elements "jump" during loading. More info: https://web.dev/optimize-cls/
This commit is contained in:
parent
af6ece0e10
commit
d45926c0f4
2 changed files with 2 additions and 1 deletions
|
@ -172,7 +172,7 @@ an example:
|
|||
|
||||
<picture>
|
||||
<source srcset="https://seirdy.one/misc/website_colors.webp" type="image/webp">
|
||||
<img src="https://seirdy.one/misc/website_colors.png" alt="This page with a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets">
|
||||
<img src="https://seirdy.one/misc/website_colors.png" width="637" height="484" alt="This page with a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets">
|
||||
</picture>
|
||||
|
||||
If you do explicitly set colors, please also include a dark theme using a media
|
||||
|
|
|
@ -59,6 +59,7 @@ h3 {
|
|||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue