One of the main motivations for FUIF is to have an image format that is responsive by design, which means it’s no longer necessary to produce many variants of the same image: low-quality placeholders, thumbnails, many downscaled versions for many display resolutions. A single file, truncated at different offsets, can do the same thing.
FUIF isn't anywhere near ready to use, but it's a fascinating idea. I love the idea that the format stores the image data … Read article
I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of "responsive websites," srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger.
Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:
Placeholder space (and then flexible responsive styles after loading)
We've been working with Jetpack around here as a sponsor. It's a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here's one way to think about it: it brings the power of WordPress' own massive servers to you.
For now, let's just focus on one angle of what … Read article
Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img /> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? "20x faster and decode 7x faster than the GIF equivalent,"says Colin Bendell.… Read article
In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native … Read article
In this post we'll look at a brief history of responsive images and why they are so important for performant websites. Then we'll look at how WordPress helps automate that, and ultimately how the whole situation gets a lot better by leveraging Cloudinary.
Perhaps you've heard about the WebP image format? And how it's a pretty good performance win, for the browsers that support it? Well that's only for Blink-based browsers, at the moment. Estelle Weyl's article Image Optimization explains the best image format for each browser:
Optimal image format
IE 9+ / Edge
And you can serve these formats through the <picture><source type=""> syntax.
Couple that complexity with the complexity of responsive images, and … Read article
No surprise to any of y'all: screens come in a whole lot of different sizes and pixel densities these days. The technology behind dealing with that is catching up. For example, responsive images. So, we need software to help us generate those many versions of images we need.
Thankfully, all the most popular design software is starting to accommodate that need. Adobe Photoshop, Adobe Illustrator, Sketch, and Affinity Design all have pretty solid workflows for doing just that. I … Read article
The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img /> and the <picture></picture> element. But how do the capabilities that these things provide map to CSS?… Read article
I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.
Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send … Read article
Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:
Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.
What’s especially surprising to me is we need to serve a different number … Read article
In April 2014 Tim Evko created a WordPress plugin that used the CMS's capabilities to make using responsive images much easier (just do what you were already doing, reap benefits). He wrote about it here. Later it became the official plugin of the RICG. Now a year and a half later it was merged into WordPress core (meaning when v4.4 drops, it will be in there). … Read article
If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img />. Gaze upon this easy syntax:… Read article
Latest Update: The plugin has been merged into WordPress core. So if you're running WordPress 4.4 or newer, you automatically have this.
Update: The plugin created in this article has moved here and now uses the more appropriatesrcset attribute. It's the official WordPress plugin of the Responsive Images Community Group and is endorsed by the WordPress Core Team. It sounds likely that this will make it into WordPress core eventually. Pretty cool!