Link tags: jpeg

9

sparkline

On Container Queries, Responsive Images, and JPEG-XL – Cloud Four

Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.

If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.

Unraveling The JPEG

A deep, deep, deep dive into the JPEG format. Best of all, it’s got interactive explanations you can tinker with, a la Nicky Case or Bret Victor.

google/guetzli: Perceptual JPEG encoder

Google have released this encoder for JPEGs which promises 20-30% smaller file sizes without any perceptible loss of quality.

WebPonize - webponize.github.io

A Mac app for converting PNGs and JPEGs to WebP.

Retina revolution

You’ve probably seen this already, but it’s really worth bearing in mind: when you’re scaling up JPGs for retina display you can safely reduce the image quality by quite a lot—to the point of getting the exact same file size as a higher quality image that’s half the size.

JPEGmini - Your Photos on a Diet!

This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.

Squirrel!

Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!

Compare the “view source” output with the generated source output to see it’s being interpreted.

Responsive image format - blog

An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.

How I Learned to Stop Worrying and Love Responsive Images — Paul Robert Lloyd

Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.