Image Optimization Guide: Boost Your Website Speed in 5 Easy Steps
Image file formats
The primary way to change the image size is to change the file format and pick the format that is best for the job. There are 4 main image formats used on the web — JPEG, PNG, SVG, GIF. Each of them has specific use cases.
- JPEGs are usually used for images with many colors such as photographs. The downside of JPEGs is that they don’t really allow for transparency. You can’t set the background of JPEG to be transparent. To have a transparent background you must use PNG or GIF. So JPEGs are for complex images with lots of colors. They also are a little bit big.
- GIFs usually limit the number of total colors that you can use in a GIF (2–256 colors). And reducing the color count leads to huge file savings. That’s why they are really good for animations.
- PNGs usually limit the number of colors you can use and because of that, they are a lot smaller in size than JPEGs. Also, you can add transparency to PNGs.
- SVGs are vector graphics. You can expand an SVG to several times its original size and it will be just as sharp as the original was. Also, they are very small in size. You can also customize them using CSS. But they are very simple things with a few colors.
You need to pick the right format of images and then compress them as much as you can without minimizing their quality.
When to use what?
- for transparency use a PNG
- for animations use a GIF
- for colorful images use a JPG
- for icons, logos, and illustrations use SVGs
5 simple steps to optimize your images
There are 5 main steps to minimize images
1. Reduce JPEG, PNG with optimizer tools (my preference is Compressor.io or TinyPNG)
Let’s optimize one large JPEG and one large PNG using TinyPNG.
Here are the original JPEG and PNG images which we need to optimize (3.0mb JPEG, 1.9mb PNG). By the way, if you don’t have a good internet speed than these images might not load for you because they are too big. That’s why we need to minimize them because not every user has perfect internet speed.
Let’s upload them in TinyPNG or any tool that you choose and optimize.
So we just saved 68% (1.3mb) for our PNG image and 46% (1.4mb) for our JPEG image.
Here are the images after optimization. And you can see that they’re still very clear for the website.
2. Resize the image based on the size it will be displayed
Match up the resolution of the images to the size that is actually displayed on a website. For example, if we’re displaying those images at a maximum of 640 pixels wide then we don’t need to keep them 5182*3454 pixels. Let’s chop them down to the actual image size. An image with half the width will be even less than half the size.
So for the JPEG we saved another 95.6% and went from 1.6mb (5182*3454 pixels) to 71kb (640*427 pixels). And for the PNG we saved 96% and went from 600kb (6000*4000 pixels) to 24kb (640*427 pixels) .
Can you tell the difference between 1st and 3rd images?. On this size, they look as clean as they were before optimization. Overall, we saved 97.6% for our JPEG image and another 98.7% for our PNG image. Then why would we want to send ~98% extra kilobytes to our users?
3. Try to choose simple illustrations over highly detailed photographs
This one is simple. Whenever you’re building a website just think twice of what images are you using. Do you need that super detailed photo or maybe you can just use a nice icon instead?
4. Display different sized images for different backgrounds
Why would we want to send a large background image that’s for a 4k screen to somebody who’s in their mobile device? Use media queries to send different sized images for different screens.
The browser is smart enough to know to download whatever it actually needs. If the user uses an iPad and he or she doesn’t need a large-background image then the browser doesn’t need to load it.
5. Remove image metadata
This one is more about security. Most photos have data about where the photo was taken, what device it was taken on, etc. Use tools like exifpurge.com or verexif.com to remove metadata from the image.
Metadata aren’t that big (~3kb) but you should also consider removing them before you send the image to the users.
6. An alternative. Use CDNs
If you don’t want to do the optimizations by yourself you can just use CDNs (Content Delivery Networks) like imigix. They take care of all the images for you. Just upload all your images that you’ll be using and they will optimize and give you a URL of the optimized images which you can access.
Using all these techniques listed here we are able to save a lot of transfer that a client and a server need to do. Make sure that all your images are as small as possible so that your websites are performant.
