Published on | Prototyping: From UX to Front End — Medium Lizzy Klingen

What keeps me up at night

I feel sort of like a crazy person saving 20 versions of the same image. Of course I want to put out this crisp, beautiful png for the world to see, but at almost 400KB per image, where do I draw the line?

A shift in design

The story starts here: I’m working a a site and in the debugging mode, and I start to test on my phone. All of the content on the page seems to disappear and then reappear as I scroll through the page. There is clearly a rendering issue, and I immediately panic and wonder what I messed up (I am fairly new to actually putting up my own code, and am fairly used to just handing off mockups to developers). I go in and make sure the pages are validating and check for obvious syntax errors.

My next idea is that I exported one of my images really huge. This was spot on. One of my hero images was 24MB and had a width of 9000px. So I re-export that image and feel that I have solved my issue.

However, I haven’t really. There is still about a second of loading time that is going on, and I know I have created a very simple, small site in terms of lines of code so I am keen on figuring out what else I can do to optimize my site.

(You can ignore my 2 warnings, just google maps API calls…)

This content download worries me, so I look at my image file sizes. Even my smaller images are 300+KB, and so I go off on adventure to figure out how to get them smaller without sacrificing the look and feel of my site.

Some of my attempts at testing compression quality.

I often am handing off jpg files, so I know jpeg compression is something that works well for the web. My typical autopilot to png wouldn’t work super well for a large ecommerce site, for example, where there are hundreds of images to load. After saving jpegs with differing levels of quality, I decided that I could settle for a quality at about 60 without cringing at the thought of putting a picture out into the world. My rule of thumb was that if I couldn’t really see the difference between two images, that I would just go with the smaller file size. This put my file size down from 300KB to 25KB.

Export settings that I landed on

Send me your thoughts!

All images are a little different, so compression that works for one type of image might not work on another. If you have any tips or tricks of the trade to share, I am only just touching the surface of this space and want to start some discussion, so reach out and comment!

Happy designing all.

Optimizing images for web/mobile was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Optimizing images for web/mobile

Cool stuff, every week

More Articles