Formatting Images for Website Design

Images are big part of website design because they are absorbed more quickly than writing. They also give off important brand signals for your small business. To take full advantage of your images, ensure they are formatted correctly for optimal performance, usability, and website ranking.

Best Image Formats for Web Design

There are dozens of image formats, but for web design, we only need to consider two categories—legacy formats and modern formats.

For other types of website graphics, see our post on The 6 Types of Website Graphics.

Legacy Formats

Since the beginning of the internet, websites have used two dominant image formats that you have likely heard of—.jpeg and .png.

.jpeg images tend to be smaller and more compressed, giving them a more ‘pixelated’ look.

.png images tend to be bigger but more clear.

Both are considered legacy formats because they will work with all browser versions.

Modern Formats

In recent years, browsers began to support image formats with way better compression. That means that images can now have a high resolution and a small file size.

The two most popular modern formats are .webp and .avif.

Wherever you can, use a modern image format. But! Ensure you have a legacy backup in case your users are on an old browser.

A common way to do this is with the <picture> HTML element.

<picture>
    <source
        type="image/webp"
        srcset="image.webp"
    />
    <img src="image.jpg" />
</picture>

The <source> element contains the modern format, while the required <img> element holds a fallback in a legacy format.

The browser will automatically fallback to the .jpeg if it does not support .webp.

How to Orient Your Images

Image orientation—also referred to as Art Direction—is another consideration for web design.

Typically, you will want to display horizontal images for desktop users and vertical images for mobile users.

Horizontal image for desktop users.

Vertical image (cropped) for mobile users.

But how can you tell whether a user is on mobile or desktop?

You tell these users apart with media queries in CSS. Media queries allow you to apply different styles when the browser window is narrow (mobile) or wide (desktop).

Here’s a contrived example of how to serve different images to mobile and desktop users through media queries.

<img
	src="vertical.jpeg"
	alt="field of flowers"
	class="mobile"
/>
<img
	src="horizontal.jpeg"
	alt="field of flowers"
	class="desktop"
/>

.mobile {
	display: block;
}

.desktop {
	display: none;
}

@media only screen and (min-width: 1024px) {
	.mobile {
		display: none;
	}
	
	.desktop {
		display: block
	}
}

That is a classic, albeit messy, way to solve this problem.

A more modern solution is to use the <picture> element we talked about earlier, and NO CSS:

<picture>
	<source
		type="image/jpeg"
		media="(max-width: 1023px)"
		srcset="vertical.jpeg"
	/>
	<source
		type="image/jpeg"
		media="(min-width: 1024px)"
		srcset="horizontal.jpeg"
	/>
	<img src="horizontal.jpeg" alt="field of flowers" />
</picture>

This allows you to easily swap an image with only HTML code.

Image Resolution and Optimization

As mentioned above, modern image formats allow for higher resolution photos to be displayed without destroying your site speed.

Still, you can make your site even faster by only displaying images that are 2x the size of the screen width.

Why 2x? Because iPhones/MacBooks and other ‘retina-like’ devices obtain their sharpness by doubling the pixel count.

That means for a user on a phone that is 500px wide, you would want to serve an image that is 1000px wide (if it is a full-screen image).

You can find a long and techincal guide here that explains exactly how to do this. But we will summarize with the solution, again, using the <picture> element:

<picture>
	<source
		type="image/webp"
		srcset="image-800px.webp 400w, image-1600px.webp 800w, image-2400px 1200w"
		sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
	/>
	<img
		src="image-400px"
		alt="image description"
		width="1200"
		height="auto"
		decoding="async"
	/>
</picture>

Conclusion

Images are a big part of both website design and website performance. Make sure that your images are formatted correctly to increase your site speed, usability, and ranking.