Web Images & Optimization

What’s going on behind the scenes of website performance and ranking? Image optimization. Images have an impact on how a website looks and behaves. When optimization is done correctly, users will find your site and have a better user experience when they arrive. Yes, image optimization encompasses more than just reducing file size. It means using high-quality graphics without sacrificing storage space or speed. More to come on that later!

Image optimization is essential for an efficient, high-ranking website. There are many aspects to image optimization. The few we will cover in this article are using the correct file type, some best practices with reducing or compressing a file, adding in alt text to make for better search engine crawling, and boosting your branding story.

File Type

Ensure you are using an image file type that best suits an image’s purpose and placement.

There are many image formats, but three stand out in a typical website: PNG, JPEG, and GIF.

Portable Network Graphics (PNG) best suits digital art and flat images like logos and icons.

JPEG—or compressed graphic format standardized by the Joint Photographic Experts Group—is best used for photos. Files straight from most cameras are JPEG and can be compressed significantly without losing much-perceived detail.

GIFs (Graphics Interchange Format) are typically used for animated images. However, they are not widely used because of color limitations.

A recent modern format is WEBP (a web-first photo format by Google). This is similar to JPEG but can be compressed further with the same perceived quality. Not widely used at this time due to a lack of support with older browsers.

Reduction

Image optimization aims to reduce file size (compression) without sacrificing image quality. This has the most significant impact on page load times and user experience. One way to drive away users is to include images that take a long time to load.

Smaller file sizes are ideal, but they should be manageable and not too small. Images should be as small as possible while presenting a clear and distortion-free image.

Using a photo editor such as Photoshop can help reduce file sizes while maintaining quality. For example, when compressing JPEGs, setting the compression to 70-90 percent can achieve a balance between small file size and good visual quality.

Alt Text

Alt text is the written version of an image that replaces the image when it fails to load. Alt text also helps the visually impaired understand the content on the page or image. Search engines rely on alt to crawl and rank your website. When writing alt text, it is good practice to ask yourself if the page will still be understandable if the image is replaced with the alt text. Below are some other things to keep in mind when crafting alt text.

Alt Text Best Practices

• Add alt text to all images
• Make it descriptive, but keep it short
• Describe what the viewer will see – Do not include “image of” or “photo of” in the text
• For images with links, be sure to include the action that will take place when the viewer clicks the link within the alt text.

Be Selective

Images contribute to the narrative of a website. They assist users in comprehending your brand, business, or story. Although images are great visual additions to your website, having too many of them can slow down load times and decrease user experience.

Be selective and curate images that intentionally connect with your audience or enhance the user experience.

Images help to promote your brand. With image optimization in mind, you can boost user engagement and attract new visitors. Take your time with optimization best practices and create a quality brand for yourself. If you are looking for help with image optimization, alt text, or anything website related, our team of experts is ready to help. Contact us today to get started.

Based on the information written by the Adobe Communications Team: https://blog.adobe.com/en/publish/2022/02/02/how-to-optimize-images-for-your-website.