Optimize Images

Part of creating a great user experience on your website means including animations and dynamic content along with high quality images to support various pieces of content. While this imagery is great for giving visitors and users a visual story about your company, brand, products, etc., if image size is not kept in check, it can lead to increased page load times and other performance bottlenecks, which can deteriorate the user experience. Depending on how your pages are displayed and your needs, optimizing images can mean considering a few different options.

For a lot of web pages, images can account for over half of the size of the page. Not only that, mobile devices account for over half of the worldwide internet traffic. Because of factors like these, there are many considerations that need to be made, depending on the needs of the business and site. First, you must consider how you serve images, as it pertains to desktop and mobile devices. Ensuring your images are responsive and are optimized for mobile devices can help faster load times by using less bandwidth compared to desktop devices. However, in some cases, users want to see what they are buying, so it may be necessary to include high-resolution images, especially for retail sites.

Another aspect to consider is file type. For most websites, JPEG and PNG are widely used, however, vector graphics, like SVG, should be preferred over PNG and JPEGs when using images for logos, icons, and text. Vector graphics also scale well across different devices and aspect ratios. The downside of vector graphics is that, unlike PNG or JPEG formats, they lack photorealism, meaning they are not a great file type when trying to display an actual image or photo.

Lastly, a couple of additional considerations for images should be image dimension and compression. As web pages are being built, sometimes the actual dimension of an image is not considered. It may show up fine on a user’s page because it is being resized, however, the browser still must download the complete image, which is unnecessary. Resizing images to their proper display size will help ensure there is no wasted bandwidth from the user’s side. Additionally, compressing a resized image can provide additional performance benefits. Compression allows you to reduce the file size of the image but does not degrade the quality of the image to a point where users would perceive it.

Furthermore, images that are not compressed will take longer to load. So, consider reviewing and compressing all your JPEG, PNG, GIF, SVG and other image file types. Seconds matter, especially with users on mobile devices, so optimizing your images can make all the difference with their experience on your site.