<p>Published on <a href="https://blog.prototypr.io/optimizing-images-for-web-mobile-703acf9ca539?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Lizzy Klingen </p>
<h4>What keeps me up at night</h4>
<p>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?</p>
<h4>A shift in design</h4>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fEafOUa1KIZ8yET3T-Jr1Q.jpeg">(You can ignore my 2 warnings, just google maps API calls…)</p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Y_yqwRxclKXVtry5JEH8Rg.png">Some of my attempts at testing compression quality.</p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/339/1*IwyI3P3ebkbRmYtHoYcIag.png">Export settings that I landed on</p>
<h4>Send me your thoughts!</h4>
<p>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!</p>
<p>Happy designing all.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=703acf9ca539" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/optimizing-images-for-web-mobile-703acf9ca539">Optimizing images for web/mobile</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Optimizing images for web/mobile

What keeps me up at night

Top Stories