Reducing image file sizes for use on websites greatly impacts the Core Web Vitals score, especially the Largest Contentful Paint (LCP), which is one of the key metrics used by Google in SEO ranking.
Largest Contentful Paint (LCP) measures the time it takes to load the main content of a webpage, including images, videos, or large blocks of text. If the images used on the website have too large a file size, it increases the loading time, resulting in a lower LCP score.
There are several methods for reducing image file sizes, including resizing before uploading to the website or letting the website handle it after uploading. Each method has its pros and cons, and different tools are available for each approach.
Table of content
Popular image file formats used on website
In the old days, popular image file formats included JPG, JPEG, PNG, and GIF, which had larger file sizes. However, new formats like SVG, WEBP, and AVIF have been developed. This discussion will focus on AVIF and WEBP, which are modern image file formats with several advantages suitable for website usage.
AVIF features highly efficient compression, significantly reducing file size without sacrificing quality. It supports color depths of up to 10-bit and 12-bit, resulting in higher resolution and a wider color gamut. Additionally, AVIF supports advanced image compression features such as HDR (High Dynamic Range).
Although major browsers are starting to support AVIF, it is not yet as widespread as JPEG and PNG. On the other hand, WEBP offers efficient compression and can compress both lossy and lossless formats. The file sizes are smaller than those of JPEG and PNG, and it supports images with transparent backgrounds like PNG, but with smaller file sizes.
WEBP has several advantages that make it an excellent choice for website images. The main benefits include smaller file sizes with both lossy and lossless compression, making file sizes significantly smaller compared to JPEG and PNG while maintaining good image quality.
Additionally, WEBP supports transparent backgrounds, making it suitable for graphics, logos, and icons requiring transparency. It also supports animations like GIF but with smaller file sizes and better quality. The support in major browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera makes WEBP widely usable without compatibility concerns.
Reduce image size with TinyPNG
There are many websites for compressing image files, but the popular one I use is tinypng.com. The process involves uploading the desired image to the website, which then compresses the image to the smallest possible size. For example, in the image provided, you can see that the size is reduced by 70-80% from the original size. Although the compressed image may lose a bit of quality, the reduction in size is a worthwhile trade-off.
The advantage of uploading image files using TinyPNG is that it allows for pre-processing before uploading to the actual server. This pre-processing saves server processing resources and helps conserve storage space on the website. Since WordPress stores the original image and then generates multiple resized versions, using TinyPNG ensures that the original image is already optimized before this process.
In fact, TinyPNG offers a plugin for WordPress as well. You can upload images and use their API to compress them, but this service incurs a step-by-step cost. There are also other plugins with similar capabilities, such as Imagify and Shortpixel, which offer more affordable packages if you need to handle a large number of images.
Convert image files to WebP and AVIF on your own computer
The programs I regularly use on my Mac are WebP Converter and AVIF Converter. Both of these tools are free. You can drag and drop JPEG, PNG, or GIF files into the program, and they will automatically convert them to WebP and AVIF formats. The image quality is almost unaffected, and the file size is significantly reduced. Additionally, you can batch process images and select the desired output folder.
Use PhotoScape to resize images and convert files in one go
One of the main advantages of PhotoScape is its ability to perform batch processing. The converters mentioned above can only convert file formats, but if you need to perform repetitive tasks, you can set up PhotoScape to handle these tasks in batches. For example:
- Convert files to a maximum width of 1680px.
- Convert to WebP format and set image quality to 80% of the current image.
- Set a prefix for image filenames.
- Select the desired output folder.
You can configure all these settings once, and in future sessions, you just need to drop the files into the app and click “Save” to get files that meet your predefined standards.
Instructions for Using PhotoScape
- Drag and Drop: Drag the images you want to process into the designated area at the top.
- Select Image Size: Choose the maximum image size you want, either by width, height, or aspect ratio.
- Save Settings: Click the “Save” button at the bottom, which will trigger a popup.
- Specify Output Folder: Set the folder where you want to save the processed images.
- Convert to WebP: Convert the file to WebP format directly from this popup and select the desired quality.
- Name Your Files: Customize the file names, adding prefixes or suffixes as needed.
If you’re interested in this app and you’re a Mac user, you can download it for free here
