Jon Lee

website guide

Optimizing images

Generally you will want to make the images as small as possible without sacrificing quality. Use a service like tinyjpg.com or tinypng.com for website assets.1

For high-quality photography, go for large pixel dimensions with higher compression, with a soft limit of 400 KB per image. In one example, we went a height of 2000 pixels (and the width was whatever it ended up being), and in Photoshop, we exported the image with the compression level of 1–3 (which is technically quite low quality) with acceptable results.

One thing to consider for photography galleries is that on mobile devices you’re asking your users to spend a considerable amount of their data bandwidth to view all of your images. All of those pixels may be more detail than what the phone can actually display.

Finding the right balance so that the image looks good on both both screens and large desktop screens will require a little bit of experimentation. The effort is worth it, though—making sure the images are as small as possible conserves your users’ data plans, and helps the site to load quickly.

  1. Both are essentially the same website, and I’ve found I can compress both JPGs and PNGs at the same time without any issue. 


Hi! Have a comment, question, complaint, observation, or criticism about this post? Leave your comment below!