Optimizing JPEGs for webpages
Published — 1 minute read
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:
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:
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.