Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.
The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on
ID attributes referenced via
:target). Depending on your use-case, that may or may not be desirable.
It looks like the
async attribute is going to ship in Chrome for
This attribute would have two states:
- “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
- “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.
Amber has been investigating which image formats make sense for which situations.
Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!
119 slides from Sarah on a wide range of SVG magic (with code).
When I was in Porto a few weeks back, I took lots of pictures of the beautiful tiles. They reminded me of the ubiquitous repeating background images that were so popular on the early web. I was thinking about abstracting them into a collection of reusable patterns but now it looks like I’ve been beaten to it!
Google have released this encoder for JPEGs which promises 20-30% smaller file sizes without any perceptible loss of quality.
A Mac app for converting PNGs and JPEGs to WebP.
These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.
Jason revisits responsive images. On the whole, things are looking good when it comes to browser support, but he points out that
scrset’s precursor in CSS—
image-set seems to have dropped off the radar of most browser makers, which is a real shame.
Images, videos, sounds, and 3D models are now available from the European Space Agency under a Creative Commons Attribution Share-alike license.
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
This is an interesting use of voodoo magic (or “machine learning” as we call it now) by Google to interpolate data in a small image to create a larger version. A win for performance.
This use-case for blend modes is making me thirsty.
Also: look who’s blogging again!
See, when I first heard about
background-repeat: round; I thought it was something to do with making things circular. But no, it’s about tiling a background image so that nothing gets cut off. The amount of tiling required is rounded to the nearest whole number.
Now I get it.