How to optimize images for your website

In today's digital age, your website isn't just an afterthought. It's how you represent your brand and how you attract interest and potential clients.

As a web consumer, you expect certain things from a website — ease of use, good design, quality images. When it comes to building one yourself, it’s easy to feel overwhelmed by all the work that goes into making sure your site checks each of these boxes. And then there’s the task of actually getting it in front of viewers, all of which goes far beyond finding the right template or landing the right designer.

One behind-the-scenes best practice that is critical for a website’s performance and ranking is image optimization. It's simple yet easy to forget to do — and vital to a successful website.

Your site's design and performance depend on image optimization

Optimizing images for your website means using high-quality visuals that are the ideal format, size, and resolution to increase user engagement. This ensures that your content loads quickly and is easy to navigate.

Image optimization also involves accurately labeling your website's images so search engines can find and understand your page content, key for improving your SEO rankings. This process can include everything from the way you label your images, to what words you use in titles, to where you put things on a web page.

Because image optimization affects the way a website looks and behaves, it means when done well, searchers find your website, and they will have a better user experience when they get there.

Now that you know how image optimization affects a website, let's talk about how to actually do it.

Choose the right file type before uploading

The first step when using an image is to pick the file type best suited for it. Most images on the internet are one of the three following types:

A Portable Network Graphic (PNG) file stores graphics on websites. This format is ideal for digital art, particularly flat images like logos and icons.

A JPEG file is an image saved in a compressed graphic format standardized by the Joint Photographic Experts Group (hence “JPEG”). This file format is best for photos because most digital cameras use JPEG extensions as their baseline.

Graphics Interchange Format (GIF) files can hold multiple pictures at once. For this reason, they are used to create simple animations through a flipbook-like process.

Reduce image file size

All of the above image file types display static images where every pixel has a defined color, position, and proportion. Because they're static, however, you can't resize these images, you can only stretch them — which often makes them blurry and pixelated.

Large, high-resolution images take up storage and slow your site load times, which is a quick and easy way to drive away would-be viewers. Plus, all that extra information does little to improve how your image displays when it finally does load for the viewer.

On the other hand, if you pick an image that’s too small for the space, it will appear distorted and fuzzy — not ideal for establishing credibility. Smaller file sizes work best when you want to send an image for someone to glance at.

So be sure you have the right file size you want to work with as you create your web content. You can resize images by adjusting the pixel dimensions using photo editing software like Photoshop or Lightroom, which allow you to fit the image to your space without sacrificing quality.

Optimize the image’s alt text

Alt text is the written copy that appears in place of an image on a webpage if the image doesn't load on a user's screen. Alt text is the easy-to-understand description of the image, and it allows search engines to crawl and rank your website more easily, making it visible to more potential clients.

One big benefit of alt text is the role it plays in helping visually impaired readers understand your content when using screen-reading tools.

By making sure your alt text is detailed and accurate, you are not only helping to build a more inclusive web, you are casting a much wider net for important, potential clients.

Here are some tips for adding alt text to your images:

• Add alt text to all non-decorative images.
• Keep it short and descriptive.
• Do not include "image of" or "photo of" in the text — simply describe what the viewer will see.
• Ask yourself whether the page would be equally comprehensible if you were to swap the images with their text alternatives.
• For linked images, make sure the alt text describes the action that will take place when the viewer clicks.

Compress correctly

Image compression refers to minimizing the size of a graphics file without lowering the image quality such that it’s noticeable. Compression is an important part of image optimization because smaller files use less memory space and allow your web pages to load faster.

Compare these two compressed images:

As a general rule of thumb, if you're using an image for your website, you should use some amount of compression. For JPGs, usually a quality between 70-90 percent achieves a good balance. Programs like Adobe Photoshop offer tools to help you compress images easily.

Describe your photos concisely in the source code

Source code, such as HTML on the web, describes the page layout for the browser. Web crawlers (search engines) can only crawl images that are laid out properly in the source code, so if you want your website to show up in Google or Bing, clear image descriptions in your web page code are a must.

Here are some tips on how to edit your website's source code to optimize images:

• Use a program. Web page/site design programs like Adobe Dreamweaver let you insert images, set tags and accessibility attributes, and see these elements in your HTML code. This way you can make changes directly in the code as necessary.
• Give users appropriate images. An attribute called "srcset" lets you define a list of differently-sized versions of the same image and provide information about the size of each one. With it, the browser automatically provides users the best images for their devices (mobile or desktop, for example).
• Remove unnecessary data. Images include metadata — information such as where and when the photo was taken, camera type, etc. — which can slow your website. It may make sense to delete it.

Understand the purpose of your image

Images contribute to the narrative of your site and help users understand your brand, business, or story. Still, too many images can bog down your load times and increase abandonment rates. In fact, statistics show that a one-second website delay reduces customer satisfaction by 16 percent, and nearly half of users refuse to revisit poorly performing websites.

So what can you do to make sure your site isn't missing out on conversions and clicks?

Be smart about images. Curate images that connect with your audience intentionally, including thumbnails, which let users manage content quickly and easily, and product images, designed to let buyers zoom in and see all the details they need so they click “add to cart.”

Better images, better practices, better websites

Give your brand a boost with images that make your website well-designed, accessible, and user-friendly. By designing with image optimization in mind, you will see an increase in user engagement as well as new visitor traffic. Taking the time to put image best practices into place also lets your clients, employees, and potential customers associate your brand with quality every time they visit your site.