In this article, you’ll learn how to optimize JPEG images for the web. If you need to get just one JPEG optimized or a few, you can skip to the paragraph on offline optimization. The rest of the text is dedicated to website and web service admins who deal with lots of pictures and have a large business task of reducing the size of JPEG images on the fly without compromising their quality.
Image optimization includes the following techniques:
Responsive design (adaptive resize)
JPEG is a lossy image format which is supported by all internet browsers. Lossy means that the files are compressed (reduced in size) by deleting unnecessary information and replacing other information with inexact representations, which makes the compression irreversible. JPEGs have been around for quite a while (since 1992), and the compression algorithms are not the most efficient. Still, it remains the most popular image format on the web, and it’s hard to go wrong with .jpg images if they’re compressed the right way.
Optimized images take up much less space, and therefore, it takes less time to load a webpage with images. Faster page loading improves Customer Experience (CX) and reduces bounce rate, which positively affects your business metrics.
If you run a business website that’s heavy on images with picture traffic that takes up to 60-80% of all the data, image optimization is a must-have feature. A good example is an online store or a similar service that has 5 to 10 pictures for every item, and there might be millions of items. Plus, there are promo banners, and thumbnails that can be shrunken in size without much visual difference.
You can use the PageDetox service to detect problems with image loading on your website. For instance, here are the stats of a retail store’s main page with 55 million monthly visits.
Image optimization will make loading 40% faster. Hence, it’ll provide a better retention rate and an increased average shopping cart amount for each customer within one shopping session.
The compression algorithm divides an image into cells with an 8x8 pixel grid and compresses each of them. Decent compression is not noticeable in real photos, but computer-generated or hand-drawn graphics will feature artifacts around sharp edges.
JPEG type compression works best with photo images with millions of colors without distinct contours. It doesn’t work well for website elements, such as lines, logos or images with contours (i.e., anything that has a vector graphic source).
When to use JPEG
When not to use JPEG
Photos with millions of colors Background images Avatars ±
Website elements and icons Charts and graphs Screenshots Images with an alpha channel
While this article is aimed towards web techniques to optimize JPEG for websites, I’ll say a couple of words about how it works offline. There’s not much to say: just open an image with Photoshop, GIMP, or Preview (on macOS) and follow these steps:
Go to the main File menu and click Save as
Select the JPEG format
Move the quality slider to 80-95%
Within this range, you’ll reduce the size of a JPEG image the most without losing much quality. If you select quality of less than 80%, artifacts may appear, and the file size won’t be reduced by that much more.
Hint: If you need to reduce the image file size even more, the wiser solution would be to reduce the dimensions (in pixels).
You don’t have to know how to code in Python, or learn this particular library with all its interfaces and methods and their implementations. All the means of image manipulation will be available to you via image source link directives.
There’s not only the smart mode to deliver the best image compression to the client, but also the global Adaptive Image Delivery mode. It’s a proprietary technology made by Uploadcare that not only optimizes JPEG images, but all image formats and sizes for all users on the fly.
Thus, servers don’t store 10 versions of each image for all platforms, but when a particular website with an image is being opened on an iPhone with a retina display, the appropriate picture is immediately generated and delivered to the client.
JPEG image format is here to stay, and it’ll be years before the web switches to WebP entirely, which is a modern lossy image format with more efficient compression and fewer artifacts.
So, if you run an online store, feel free to use JPEG image format for most images to save on traffic and improve Customer Experience. It’ll provide better compatibility across all web browsers. However, you need to find the right tools to optimize the images, and the best way is to optimize images on demand, as soon as someone visits your website.