Posted on by Anne Gibson

An Event Apart Seattle 2017: The Joy of Optimizing by Una Kravets

Una’s presentation centered around raster graphics and how they can be better optimized. Though she doesn’t go into it in detail, the implications of poorly-optimized raster images are costly: they tend to be large files, costing our users money in data fees (if on a price-per-MB connection) and time (if on a slow connection) as well as storage and other less-concerning issues.

For the application-heavy work that I tend to do in my day job (my wheelhouse is enterprise web app information architecture) I’m better off with SVG vector images for most uses than raster — iconography is better suited to vector for a number of reasons.

But ooh boy do I have some work to do for my personal WordPress sites.

An Event Apart Seattle 2017 The Joy of Optimizing by Una Kravets (pdf)

(It was an amazing cat gif. Very annoyed cat.)

https://twitter.com/scott_gruber/status/849390519323172866

(In contrast, my home Comcast connection is 255 Mbps.)

(Una pointed out immediately that this doesn’t grant you permission to remove one image from your site and then load a huge javascript file in exchange.)

Even if you save at “Max quality” every time you save a lossy format, the image degrades a little with each save.

While Google says that their compression algorithm is 35% smaller, multiple speakers stated that this was under best possible circumstances and the new algorithm wasn’t necessarily going to win you back 35% of your space just by using it. The link in the next tweet was referenced multiple times as well.

Turns out that histogram thing in Photoshop can be used to show you what’s degrading in your image at different save levels! I had no idea!

…which means that while it’s good to see that there are folks trying to make image formats better all the time and GIF/JPG are not our only options until the end of time, BPG is probably a dead-end in the evolution of images.

The next section of the talk was about different blend modes that can be applied to an image. Sarah Paramenter pointed out that Spotify was using many of these techniques in their image branding during her talk.

I did a lousy job of capturing the details of how blend modes work, so you may want to go read Blending Modes in CSS: Color Theory and Practical Application by Jonathan Cutrell if the following tweets don’t make any sense.

That is, it’s faster for the user to download an optimized black and white image that you use CSS to add a pink layer to than it is for the user to download the exact same optimized color image.

For example, this gem:

Anyway, moving on….

(that’s “cons”)

Hard proof that optimizing images is critical: when Una asked us all to take selfies, our phones immediately backed up the full-size images across the network to our various cloud services and DDOS’d the conference wifi.

Sketchnotes by Krystal Higgins