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.
Hypnotic.
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.
Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.
This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
We’ve got Space Ipsum for text. Now we have SpaceHolder for images.
Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).
He finishes with a plea to avoid unnecessary complexity:
If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!
It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.
Here’s a handy shortlist to run through, HIKE:
- H stands for headings and semantic markup.
- I stands for images and labels.
- K stands for keyboard navigation.
- E asks for you to ACT with a little extra love for custom components and more.
(ACT = ARIA, Colour Contrast, Text Size)