Why You Should Compress Images Before Uploading to Your Website
When adding images to your website, it’s a good idea to compress them. This not only increases your website’s loading speed but also saves on the amount of data your visitors use to visit your site. There are various methods you can use to cut down on your image file sizes, including changing file types, decreasing quality, minimizing image dimensions, and more.
What is the Best Image Type to Use?
There are dozens of file types you can save your images as, so which one is right?
Vector vs. Rasterized
When choosing a file type to save your image as, it’s important to understand the difference between vector and rasterized images. Vector images, most commonly saved as SVG files, use lines, curves, and coordinates, rather than traditional pixels, to create images. This allows them to scale infinitely without containing megabytes worth of data. SVG files are ideal for 2D graphics like logos and icons.
Rasterized images are your typical image types that use pixels to create an image. Examples of rasterized image types are: JPEG, PNG, GIF, WebP, HEIF, BMP, and TIFF images. There are many subtle differences between these file formats, but the main difference comes down to whether they use lossy or lossless compression.
Lossy vs. Lossless
Image types that use lossy compression “preserve a representation of the original, uncompressed image” but are not perfect copies of the original image. This allows them to trade pristine quality for a smaller file size. The main image format that uses lossy compression is JPEG.
Lossless compression is used when you don’t want to compromise image quality. Lossless compression reduces file sizes less than lossy compression does, but the resulting image is a perfect copy of the original image. Image formats that use lossless compression are PNGs, GIFs, and BMPs.
The TIFF image format can use either type of compression. WebP images use a mixture of lossy and lossless compression.
Best Practices
When optimizing your website’s images, it’s best to do so in stages, rather than all-at-once. Not all browsers support all image formats, so it’s a good idea to include “fallback image files” when switching to more optimized images. This will prevent users from encountering errors on your website if they are using an outdated browser.
To figure out what image format is best for your website/individual images, you should take into consideration what the max size each image will display at and if quality can reasonably be compromised or not. For logos and graphics, SVG files should be used, as this file type will increase quality while also reducing size. For large-displaying images with a lot of detail, PNG will likely be the best option as to not compromise quality. Most images will likely do best as JPGs or WebPs.
Image Compression Tools
In order to compress your images properly, you will need to use an image compression service or software. There are various free and paid options to choose from. TM often uses TinyPNG, WWW Image Optimizer, Lightroom, and Photoshop.
Need help determining which image format is right for your website? Contact Perfect Afternoon to get started!
Suggested Read: SVGs: How TM’s Developer Enhanced a Client’s
