Jun 21, 2021

Back again with more on images, performance and accessibility!

By Duncan Mackenzie • Issue #11 • View online

I finally updated my own blog to support multiple image formats, so it seems appropriate to just keep pushing on the topic of bandwidth and performance. Don’t forget to scroll all the way down, as there’s a great accessibility focused article at the end! Forward this along to folks on your team if you think they’d appreciate it.

🔻𝗝𝗼𝗻 𝗦𝗻𝗲𝘆𝗲𝗿𝘀🔻

@jonsneyers

#AVIF can reach the perceptual quality of a bad q20 jpeg in only half the bytes.
#JXL cannot do that (yet?), but it can reach the perceptual quality of a good q80 jpeg in only half the bytes — which is something AVIF cannot (yet?) do.

(thanks for the meme, @_190n) https://t.co/DeI5mS8zVY

1:06 PM - 19 Jun 2021

Addy Osmani

@addyosmani

AVIF is an image format that can compress up to 50% smaller than JPEG & 20% smaller than WebP. In Chrome, coming to Firefox & has a few 🔧 options: https://t.co/3LYadoEnWO, https://t.co/2PEftwW3P3, https://t.co/lilf8U0Vbz https://t.co/qTvEMetNyR

12:00 AM - 12 Jun 2021

Updating my blog to support multiple image formats :: Duncan Mackenzie

JPEGs and PNGs are so last decade, I decided to update my site to provide more options to my visitors by adding AVIFs and WEBP files. I did not, yet, do the work to optimize the encoding params of these files or to provide multiple images for different pixel densities (see Jake’s article below).

www.duncanmackenzie.net • Share

Serving sharp images to high density screens

The pixel density can vary widely between different devices and monitors, but HTML already supports providing a set of different images for different sizes and densities. Jake covers the details of how to do it here, including some nice interactive demos that include a red panda… so that’s awesome.

jakearchibald.com • Share

How Real User Monitoring will improve GOV.UK for everyone

GOV.UK is adopting SpeedCurve, just like Azure.microsoft.com and Docs.microsoft.com, to measure performance of actual user visits (Real User Monitoring or RUM), as opposed to synthetic monitoring (running Catchpoint agents or doing manual WebPageTest runs). Great explanation of why RUM is more accurate/meaningful.

insidegovuk.blog.gov.uk • Share

The right tag for the job: why you should use semantic HTML

Sophie Koonin provides a great explanation of why semantic HTML is important. I rant about this all the time, but this article and the associated demos, is a much more impactful way to illustrate the benefits of doing things correctly from the start.

localghost.dev • Share

Did you enjoy this issue?

By Duncan Mackenzie

In each newsletter, I'll share a set of links related to web development and software engineering. As the editor, my opinions are going to influence the topics and tone of this material, so expect to see lots of information on web performance and general topics around working in a software engineering team! Check it out and let me know what you think at https://twitter.com/duncanma

Tweet

Share

In order to unsubscribe, click here.

If you were forwarded this newsletter and you like it, you can subscribe here.