Skip to content

Optimizing JPEGs for webpages

| Luke Harris

On a site I recently designed and developed, there's a massive 3000x2365px background image behind the whole site. It was a JPEG that weighed in at 1.9mb. I thought surely we could shave more bits off that, but fiddling around with Photoshop's Save As dialog didn't yield much, in fact, saving it at a setting where I didn't notice artifacts actually increased the size:

JPEG_Options_2015-10-07_16-57-06

I then tried Photoshop's Save For Web option, which I had been avoiding because I thought it was just a dumb tool for the old days of gifs and JPEGs with artifacts. However, it really surprised me:

Save_for_Web_2015-10-07_16-57-36

The new file is 353kb, or 18.58% of the original size of 1.9mb. Whoa. That's a 81.42% decrease in filesize. And the blur option made it to where I can hardly see any artifacts.

Definitely going to use Save for Web in PS instead of Save As from now on.

Have some thoughts on this post?

Reply with an email