feat(website): optimize blog images and fix meta/a11y #973
Conversation
| const processedImage = await getImage({ src: post.socialImage }); | ||
| const socialImageUrl = new URL( | ||
| processedImage.src, | ||
| Astro.site ?? "http://localhost:4321/" |
There was a problem hiding this comment.
Can the right hand side be Astro.url.origin? It should be more future proof, especially if you run multiple astro dev servers
There was a problem hiding this comment.
Oh nice, forgot we had this property 😅 Just for context og images need to be an absolute link because of some weird limitations in how these work, so I've wrapped it into a template literal with a trailing slash.
|
I previously used pngquant to optimize other images. Just wondering: what Astro is using under the hood to optimize images? |
It uses Sharp (or Squoosh if you need it). I believe it's still super valid to optimize images beforehand with something like |
Summary
This PR makes a few changes related to images:
Blog post images are now part of
src/content/assetsso they can be processed and optimized byastro:assets, giving a big boost to page load performance, considerably increasing the page's Lighthouse score (up to 20%-30%), and also avoiding Content Layout Shift.Here's a table comparing the image size differences:
This means images should be referenced in a different way, in both the frontmatter and in the Markdown content - the links contain Astro Docs links with the respective code samples.
Replaced a few
<img>components for Astro's<Image>for optimization and to avoid CLS.Removed the duplicate
public/img/blog/announcing-biome/biome-logo-slogan.pngthat was identical toassets/social-logo.png(same height, width, file format, content, and colors)Added the missing
alt=""attribute in authors' images so that screen readers correctly ignore them.Fixed our current blog post setup where the description and social image were not being added to the page's meta tags.
Test Plan
Tested image size differences and the meta tag changes through the Dev Tools, also visually inspected to see if any images broke during migration.