How To Optimize Your Images For Web

Optimizing your images is a small step that makes big improvements on your page load speed, which in turn is a major factor in how Google is scoring your website’s Core Web Vitals. Large images slow down your web pages, creating a less than optimal user experience. Optimizing images is the process of decreasing the file size which in turn speeds up the load time of the page. 

47% of users expect a web page to load in two seconds or less. This makes on-page optimization crucial to reducing your bounce rate. Only 2% of the world’s leading 100 eCommerce websites have sites that load fully in less than five seconds on mobile devices. At Lapero, we encourage our team to always design and develop with “mobile first” in mind. It is important to remember that over 60% of your traffic is going to be coming from a mobile device, so you should always test on desktop and your phone before sending your webpage out into the world.

These load times are heavily affected by image sizes, which is why we always optimize images for web. There are a few quick tips that we can give your (File size should not exceed 400kb, PNGs are better for graphics with fewer than 16 colors, JPEGs are better for photographs, things like that), but knowing the difference between the most commonly used file formats is the first step in making sure what you are adding to your media library is properly optimized.

• GIF files are lower in quality, but also in file size. This is a great option for small icons or thumbnails. 
• PNG files support a wider range of colors, and also the only format that supports transparent backgrounds. This does, however, come with a larger file size.
• SVG files are for two-dimensional vector and vector-raster graphics for websites. SVG supports animation, transparency, gradients, and is easily scalable without losing quality.
• JPEG images are the most common format used by digital cameras and online. One of the great benefits about the JPEG file type is the ability to choose the level of compression that you would like, which allows you to reduce the filesize,but this does come at the cost of image quality. When your image is mainly lines, icons or sharp images. JPEG compression may blur the line between the image and the background and make the contrast less apparent.

Image compression which plays a huge role in image optimization. There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use. Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features. You can also save images normally and then use a web tool like Optmizilla or TinyPNG.

Once you have selected the correct file format for your image and you are ready to upload it to your website, it is time to be sure that you have the correct image dimensions. Look at the actual spot on your site where this image will be placed, and be conscious of the size of the rendered image against the size of the actual image. The general rule of thumb is that you should not serve images that are larger than the version that's rendered on the user's screen. Anything much larger will slow down page load time. It is best to avoid using full size images unless the dimensions are adequate for their usage. 

Google’s PageSpeed Insights tool is a good online resource that measures page performance on both mobile and desktop devices, and provides suggestions on how that page may be improved. Specifically, the Opportunities section of the report lists all of your images on the page that are not sized appropriately, and also gives you a potential savings recommendation in kibibytes (KiB).  

Now that we have optimized your images for page load speed, let’s take it a step further and optimize your image for SEO.

One of the easiest things that you can do for your SEO strategy is to customize your image file names when uploading them to your media library. Image file names tell search engines about your subject matter. Changing the file name of a product from something like “image0002.jpg” to something that a search engine can understand will improve your SEO value. This also will help keep your media library easy for you to use. Additionally, adding SEO friendly alt tags to your images provide contexts to what an image is displaying, which allows search engines to index an image correctly. Alt tags are a text alternative to images when a browser can’t properly render them. This text is also what is read by screen readers when users with disabilities are using your website. Alt tags are required under the American Disabilities Act for individuals who are unable to view images themselves.

Do you have any other questions about how to best optimize your website’s images? Reach out to us for a full audit of your website performance!