Website Image Optimization - How to Reduce Image File Size?

Optimizing images on a website is an important factor affecting SEO and page loading speed. Images make up about 50% of a website's weight. This means that unoptimized or poorly optimized images can significantly slow down page loading. The longer the page load time, the less likely users are to stay on it, which can affect its ranking in search engines. In this article, you will learn what image optimization is, why it is worth optimizing images, and how to reduce image size for faster page loading. The most important step in image optimization is choosing the right graphic format. There are three formats most commonly used for website images: JPG, PNG, GIF. Each of these formats has its own uses and features that should be considered before choosing a specific image format. We will describe them in detail later in the article. Another important element of Image SEO is file size. The smaller the size, the faster the page loads. There are various tools that can help reduce file size, and compression is one of them. Compression is the removal of unnecessary data from a file. This reduces the graphic size with or without loss of image quality.

There are two types of image compression:

• lossy compressionLossy compression removes some information from image files, thereby reducing their size. Depending on the compression ratio (also called the degree of compression), the image quality may noticeably degrade. Lossy compressed files are less flexible and harder to handle than losslessly compressed files. However, lossy compression is best for images where a slight loss of quality is not an issue.
• lossless compressionLossless compression does not result in the loss of any information, but the files are usually larger than lossy compressed files. Losslessly compressed files are ideal for graphic files and illustrations where color, quality, and detail are important. Such compression is generally not desirable for images containing many details and gradients, as it can lead to large file sizes.

Why is optimizing graphic files for a website important?

Page loading speed

Studies show that slow website loading, including that caused by non-optimal images, is one of the main reasons why users abandon websites. According to Google, page load time should be under 3 seconds. This is because the longer the load time, the more likely the user is to leave the page before it loads. Oversized photos and other graphic files slow down page loading and negatively affect the user experience. Studies have shown that a 1-second increase in page load time can reduce conversion rates by 7%, page views by 11%, and increase bounce rates. That is why graphic optimization is so important to shorten page load times and improve site performance.

Search engine rankings

Optimizing images for a website also affects its positioning in search results. Search engines take page load time into account, which is why they also look at image optimization on your site. The longer it takes for a page to load, the less likely it is to appear in organic search results.

How to reduce image file size?

Choose the right format

Choosing the right image file format is important for optimizing images on a website. The most commonly used formats are:

• .JPGThe JPG format (also known as: .JPEG) is often used for photos and graphics on websites because it offers good image quality at a relatively small file size. This format uses lossy compression.
• .PNGThe PNG format uses lossless compression, so the image quality remains identical, but the file size is significantly larger than in JPEG format for an equivalent image. Additionally, it supports transparency, which in some cases is essential for achieving the desired visual effect.
• .GIFIt is often used to create animated images and graphics with a limited number of colors. GIF saves a series of frames to a file by compressing only the pixels that change between frames. This makes animation files much smaller and easier to transfer over the Internet.
• .SVGThis is a vector graphics format that allows you to create scalable graphics without loss of image quality. SVG is great for creating logos, icons, charts, diagrams, and other vector graphics for websites. Using SVG on your site allows you to display sharp, scalable graphics across various devices without creating multiple versions of images in different sizes. SVG is also search engine friendly, and because the files are very lightweight, they load faster and improve page loading speed.
• .JXR (JPEG XR)This is a graphic file format developed by Microsoft that provides better quality at smaller file sizes compared to other formats. JPEG XR uses advanced compression technologies, such as prediction, color conversion, and adaptive quantization, which allows for greater color accuracy and reduced distortion at lower image quality settings.
• .WebPAmong next-generation formats, the most popular is the WebP format, developed by Google. It works similarly to JPG, but provides better compression, using a more complex algorithm to create smaller files while maintaining high image quality. Using the WebP format is a good choice for websites that require fast loading of a large number of images.

Use the right size (resolution)

Using the correct image size is also important in the context of Image SEO. The image size directly affects the weight of the graphic file - the larger it is, the heavier its weight. Therefore, it is important to resize images before publishing them on your website and avoid high resolutions. There is no point in placing an image sized 3000 x 2000 pixels on a page if it is only going to be a 200 x 150-pixel thumbnail. Prepare an image of the appropriate size, matching the dimensions of the image displayed on the page. You can do this using a dedicated graphics editing tool, such as Adobe Photoshop or GIMP. They allow you to reduce the weight of graphic files without a significant loss of image quality. Reducing the size of images in pixels can also be done using the Microsoft PowerToys tool.

example of using the Image -> Scale option in GIMP

Compress the graphic file

Compressing a graphic file is the process of reducing file weight and (in principle) without any visible loss of image quality. You can do this using a dedicated image compression tool, such as TinyPNG or Compressor.io. These tools can reduce the weight of graphic files by up to 70% without noticeable quality loss.

example of using the TinyPNG tool to reduce image weight

example of saving graphics for the web in Adobe Photoshop

Choose the right quality

Choosing the right image quality is crucial for image optimization on the page. The higher the quality, the heavier the graphic file. A quality level of 70-80% is usually sufficient for website images, but it is worth experimenting to find the right balance between good image quality and the lowest file weight.

Remove unnecessary data

Removing unnecessary data from graphic files also helps reduce their weight. Digital graphics often contain additional data, such as camera and geolocation information, which can make files heavy. You can find tools online to remove this data without losing image quality.

What else is worth keeping in mind for images in the context of Image SEO optimization?

Insert images related to the content

Images related to page content can positively affect its search engine ranking, among other things, by increasing traffic, providing a better user experience, increasing clicks and backlinks, and improving context and relevance to user queries.

Use proper filenames

Using proper filenames also affects the optimization of graphic files on your site. The graphic filename should reflect the content of the image and be clear to both users and search engine crawlers. Using a filename containing keywords related to the page content can improve its ranking position. Avoid names like "image1.jpg" and "graphic.png", and use names that describe the content of the image.

Set the appropriate title attribute

To properly define the title attribute of an image on a website, you need to choose appropriate keywords that best describe the image and consider what information might be useful for users using screen readers. Make sure the description is short and clear, then add the title attribute to the HTML code containing the image in the following format:<img src="path_to_image" alt="description_for_image_when_not_displayed" title="title_for_displayed_image">Replace "path_to_image" with the image URL, and fill in "description_for_image_when_not_displayed" with a short text describing the image content. In the title attribute, enter a more detailed description to help users understand what is in the photo.

Optimize ALT attributes

Add an ALT attribute (alternative text) to all images on the page (or the most important ones if there are a significant number of them). This is text that will be displayed if the image fails to load or is not accessible to the user and will also increase the chance of appearing in Google Image results. The ALT attribute should describe the content of the photo.

An example ALT attribute that that will be displayed if the image fails to load, or its description on screen readers

Use responsive design

Responsive design is a way of designing a website so that it adapts to various devices based on factors such as screen size and orientation. This means that your website looks great on both desktop computers and mobile devices. Responsive design helps optimize images and speeds up page loading.

Use lazy loading

Lazy loading is a technology that allows loading only those images that are visible on the screen, loading the rest only when the user scrolls down the page. This helps speed up page loading and reduces the number of images that must be downloaded at the same time.

Use a CDN

This is a network of servers that store copies of your website files. Thanks to a CDN, files, including images, are downloaded from the nearest server in the CDN network, which results in faster page load times and shorter transfer times.

Test and optimize

Test your pages using performance analysis tools such as Google PageSpeed Insights and GTmetrix. This will allow you to identify image loading issues so that you can then optimize them to improve page performance. You can read more about these tools in the article dedicated to Core Web Vitals.

example of PageSpeed Insights detecting potential opportunities to reduce image size on a website\

Summary

Image optimization on a website is a factor that affects SEO and page loading speed. Unoptimized or poorly optimized images can significantly slow down page loading, which can negatively affect both user experience and search engine crawlers. There are many ways to reduce image file size without losing quality, such as choosing the right graphic file format, reducing image dimensions, changing image quality, compressing the image, and removing unnecessary data. Each of these methods has its advantages and disadvantages, so we recommend trying several different methods to find the best solution for a specific image. It is also worth remembering a few general rules that will help you optimize the graphics on your site.

• you should use only as many graphics as you need to convey your message. The more images on a page, the longer it takes to load.
• avoid using unoptimized graphics as backgrounds or decorative elements. They increase page weight without providing any value to the user.
• it is worth regularly monitoring page load speed and testing various image optimization methods to provide users with the best possible experience.

Remember, however, that the image optimization process is just one element of website optimization.

FAQ

What does the term "image optimization" mean?

Image optimization refers to the process of reducing the dimensions and file size of an image file. This may result in a slight decrease in image quality that is generally unnoticeable to most users. There are several graphics optimization methods that can be used to minimize quality loss while reducing file size.

What image resolution should you use on a website?

It is generally recommended to use images with a resolution of 72 dpi (pixels per inch) on websites. This results in better quality at smaller file sizes. The optimal image resolution expressed in pixels depends on the size of the images displayed on your site. For most images, you can assume that the optimal image width is around 1200 pixels. This ensures good image quality on most devices. However, you must remember that the size of images on your website should be tailored to the specific project, such as a photo gallery website or an online store - which means the image size may be correspondingly smaller or larger.

What format are images on a website?

JPG, WebP, and SVG are the most commonly used image formats on websites. The JPG format is best suited for images with many colors, such as photographs. The SVG format is suitable for vector graphics, such as logos and icons, which can be scaled to any resolution without losing quality. The choice between these formats depends on the type and purpose of the image you want to display on your site.

How much should an image for a website weigh?

It is recommended that no image weigh more than 200 KB, and the entire page weigh less than 2 MB. For large image galleries or websites with a lot of images, consider using image processing tools such as compressors and image editing plugins to reduce file size with minimal loss of quality. This is particularly important for online stores.