urn:uuid:dd42ecf7-4f1e-5666-8d33-c8517954228d Topic: Image Files – Ctrl blog Daniel Aleksandersen https://www.daniel.priv.no/ Copyright © 2021 Daniel Aleksandersen. https://www.ctrl.blog/assets/favicon/favicon.svg 2021-11-26T12:09:00Z weekly 10 urn:uuid:d4d4f6b1-d758-4f25-b819-40c9caa6c256 2021-11-26T12:09:00Z 2021-11-26T12:09:00Z Bitrot resistance of next-generation image formats Bitrot happens. So, what happens when I flip one random bit in AVIF and JPEG XL images. Improved data packing means less redundancy and more corruption. <p>I’ve compared two next-generation image formats, AVIF and JPEG XL (JXL), to see which best handles a random single corrupted bit. A meaningless exercise? Possibly. But half a picture of your beloved grandma is better than no picture at all.</p> <p><a href="https://www.ctrl.blog/entry/bitrot-avif-jxl-comparison.html">Read more …</a></p> urn:uuid:43b52f2e-9771-46fa-9d65-42587d288097 2021-06-11T12:06:00Z 2021-06-11T12:06:00Z The best method for embedding dark-mode friendly SVG in HTML A comparison of the many different methods for embedding SVG into HTML webpages. Which work best with light/dark-mode, client caching, interactive mode, and more. <p>In this article, you’ll learn about the different methods for embedding Scalable Vector Graphic (SVG) images onto webpages. I’ll discuss which methods support the various security and processing modes in SVG, which methods support dark mode using <code>@media</code> queries, and which are the most caching friendly. I’ll also touch on why the most backward-compatible embedding method is the worst for perceived performance and has the most accessibility bugs.</p> <p><a href="https://www.ctrl.blog/entry/svg-embed-dark-mode.html">Read more …</a></p> urn:uuid:efb19ac5-2bd1-4df5-9732-19ccb34dce9b 2020-07-14T02:26:00Z 2020-07-14T02:26:00Z Comparing file sizes of lossless WebP vs FLIF vs PNG The FLIF lossless image format makes big claims on file size savings, but lossless WebP actually delivers smaller lossless image files. <p>Last weekend, I compared two lossy image formats: AVIF and WebP. Today, I’m comparing the file size reduction of two lossless formats — FLIF and lossless WebP — compared to heavily optimized PNG images.</p> <p><a href="https://www.ctrl.blog/entry/webp-flif-comparison.html">Read more …</a></p> urn:uuid:820202d3-0f34-4f2e-9b8c-b87a7dfb549c 2020-07-12T14:19:00Z 2021-08-12T18:11:00Z Comparing AVIF vs WebP file sizes at the same DSSIM I got impressive results when comparing AVIF and WebP images at the same visual quality (using DSSIM.) AVIF’s 85th percentile was the same as WebP’s 15th! <p>I wanted to improve the image quality on the blog while keeping the file sizes small. To this end, I wanted to improve the visual quality of my WebP images and explore the new AVIF image format. Here are my findings from comparing WebP and AVIF to JPEGs at the same visual quality.</p> <p><a href="https://www.ctrl.blog/entry/webp-avif-comparison.html">Read more …</a></p> urn:uuid:f944cc84-b219-40e8-996e-bf39c9d3a39bc 2020-07-11T13:11:00Z 2020-07-11T13:11:00Z Enable the sharp YUV option for better WebP images Batch encoding images into WebP? Enable Sharp YUV for higher visual quality results at only a tiny increase in file sizes at a one-time cost to processor time. <p>Did you know there’s a setting for the reference WebP image encoding library (<code>libwebp</code>) that noticeably improves image quality without increasing the file size? It’s safe for batch conversions and its only downside is that it consumes additional processor time during encoding.</p> <p><a href="https://www.ctrl.blog/entry/webp-sharp-yuv.html">Read more …</a></p>