Archive for the ‘responsive images’ Category

Responsive Images in WordPress with Cloudinary, Part 2

Posted on: No Comments
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 th...

Responsive Images in WordPress with Cloudinary, Part 1

Posted on: No Comments
If you're reading this, you’re probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we'll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web's e...

The “Optimal Image Format” for Each Browser

Posted on: No Comments
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 ...

Exporting Images in Multiple Resolutions Simultaneously

Posted on: No Comments
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 vers...

Responsive Images in CSS

Posted on: No Comments
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> element. But how do the capabilities that these things provide map to CSS? CSS generally ...

Responsive Image Breakpoints Generator

Posted on: No Comments
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. Sooo...

Web Image Effects Performance Showdown

  As browsers constantly improve their graphical rendering abilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual impact, and allow for consistency without ...

Automatically Art-Directed Responsive Images? Here You Go.

Posted on: No Comments
  In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill (or a simil...