Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set. <picture> <source srcset="/images/cereal-box.webp" type="image/webp" /> <source srcset="/images/cereal-box.jp2" type="image/jp2" /> <img src="/images/cereal-box.jxr" …
Tag Archives: images
Using AWS’ “Serverless Image Handler” to roll your own Image Transform Service
Amazon AWS has offered a Serverless Image Handler for a while that allows you to spin up an AWS Lambda function to create your own private little image transform service that is inexpensive, fast, and is fronted by the CloudFront content delivery network (CDN). Whenever an image is uploaded to the bucket, a Lambda function …
Continue reading “Using AWS’ “Serverless Image Handler” to roll your own Image Transform Service”
Optimizing images for the web – an in-depth guide
It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches …
Continue reading “Optimizing images for the web – an in-depth guide”
WebPonize – Mac app to Convert images to WebP
WebPonize is a macOS app which converts images to WebP. Just drag and drop your image sources on it and you’re good to go. Installation per Brew Cask: brew cask install webponize WebPonize – Convert images to WebP →
Automatically compress images to your Pull Requests with this GitHub Action
The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane: Image actions will automatically compress jpeg and png images in GitHub Pull Requests. Compression is fast, efficient and lossless Uses mozjpeg + libvips, the best image compression available Runs in GitHub Actions, so it’s visible …
Continue reading “Automatically compress images to your Pull Requests with this GitHub Action”
Unraveling the JPEG
“Unraveling the JPEG” is a great deep dive into the JPEG image format. This article is about how to decode a JPEG image. In other words, it’s about what it takes to convert the compressed data stored on your computer to the image that appears on the screen. It’s worth learning about not just because …
Native image lazy-loading for the web with [loading="lazy"]
Addy Osmani, on an upcoming web feature which is about to land in Chrome 75: The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy: is a good candidate for lazy loading. eager: is not a good candidate for lazy loading. Load …
Continue reading “Native image lazy-loading for the web with [loading="lazy"]“
Lazy Loading images with IntersectionObserver
Smashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded …
Continue reading “Lazy Loading images with IntersectionObserver“
How Discord Resizes 150 Million Images Every Day with Go and C++
Great in-depth writeup on how Discord struggled to resizing lots of images via their Image Proxy Service: As Discord grew, the Image Proxy started to show signs of strain. The biggest problem was the Image Proxy did not have an even workload distribution, which hampered its throughput. Image proxying requests saw a wide variance of …
Continue reading “How Discord Resizes 150 Million Images Every Day with Go and C++”
SQIP – SVG-Based Image Placeholder
In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts. Load in the bigger one. Once the big version is loaded, replace the small …