Website Design Part 5: Using Images (Updated)

Warning
This article contains language that may be offensive to some readers.

---

Every website needs great imagery and I’m sure you’ve thought about how to use photography and graphics strategically in your design to both inform and delight the user. What I bet you haven’t thought about, is how they can fuck loading and site speed. So here’s how to think about images in your website design from an optimization perspective.

In This Article

• The difference between raster and vector images, and when to use each.
• How to use decorative, supporting, and background images effectively.
• How large your images should be, in both dimensions and file size.
• Which file formats to use, including WebP and AVIF, with real-world comparisons.
• When icon fonts might be a better option than image files.

Let’s start with the obvious. Lots of big images slow down sites. Every image on the page is a file that has to be loaded and big files load slowly. Does that mean you should use fewer images? The good news is that no, you don’t have to skimp on the visuals. You just have to be smarter about it.

So how the hell do you plan for an image-heavy site then?

What Image Should You Use?

Image Types: Raster vs Vector

When we talk about images, there are two basic types, Raster and Vector.

Raster Images:

• Made up of individual pixels
• Used for highly detailed images like photographs
• Tend to look like shit when resized. Scaling down loossles details and scaling up makes them look pixelated. This can be mitigated sometimes by generative AI rescaling.
• Generally larger file size than vector images
• Difficult to convert to Vector

Choose Raster for photographs and detailed illustrations. 

Vector Images:

• Can scale smoothly to any size
• Great for graphics with clean lines, like icons and logos
• Small file sizes
• Not ideal for highly detailed or complex images
• Can easily be converted to Raster formats

Choose Vector when you have a clean graphic like a logo, simple illustration, or icon.

Image Applications

Of course, the image you choose will also depend on what you’re using it for. Is an image purely decorative or does it support the content? Is it a background or does it sit within the layout?

Decorative vs Supporting Images

Ok, so when I refer to “Decorative” images, what I mean is something that serves no real visual purpose, it’s just kinda there to look pretty. It’s usually a graphic, something simple, and if you got rid of it, the tone, messaging, and visual flow of the page wouldn’t really change.

An example of this might be a decorative separator between a heading and a paragraph of text. Chances are, you don’t need what is essentially a horizontal rule with delusions of grandeur to  break up your content. If you just use spacing or a simple underline to do to the same thing, the content still comes across clearly.

When it comes to “Decorative” images, don’t go overboard. They can add some character to a site but use too much and they can detract from the actual purpose.

A “Supporting” image, on the other hand, is one that reinforces the nearby written content and/or enhances the visual flow of the page. An example of a supporting image would be a picture of a technician working on an AC unit next to a paragraph about AC repair services. It could also be an image inserted into the layout to break up the copy or one that draws the user’s attention to a specific section of the page.

Images vs Background Images

What’s the difference between a regular old image and a background image, you ask?

A regular image is an element placed within the page. It takes up space based on its width and height. A background image, on the other hand, only fills the space its containing element does. Also, depending on the background’s settings it can repeat, scale and crop in different ways.

Why do you need to know this? Well, when you use an image as a background in your design you can crop and position it just the way you want. On a real website though it’s not that simple. Since the background is constrained by the sizing of the element it inhabits, things like the aspect ratio and cropping will change as the element size does. This means that at different screen sizes, it may end up cropping out parts of the image you don’t want to. Of course, you could set the container size to match the image aspect ratio so the image always fits exactly. Now you may have a problem with the internal content fitting though. So how do you pick the right background image for your design?

Considerations when using background images

Ideally, a background image adds some visual interest and texture to a section without detracting from the content. There isn’t going to be a one-size-fits-all set of rules for picking your images but it helps to keep in mind the following:

1. What is the minimum height you need for the content at the smallest screen size?
2. What is the maximum height the element should have?
3. Is you image large enough to fill this space without scaling it up?
4. Are you ok with the image cropping and scaling outside its original aspect ratio?
   • If the image is going to crop and scale, where do you want it to crop/scale from? Base this on where the main focus of your image is. For example, do you want to keep the top right portion of the image in focus? The bottom left? The exact center?
5. Is any part of the image going to cause legibility issues for the content?
6. Does the background image distract users in any way?

While background images are a bit more complicated than a regular image, they are still a great way to add colour and interest to your design or draw attention to a section, as long as you don’t just chuck them in there and say “fuck it, good enough.”

How Big Should My Images Be?

When it comes to exporting your images, bigger is not always better. Sure a big image might show all the details but chances are, your users don’t give a shit if they can see every leaf on that tree in the background. So what size should they be? Well there are actually two sizes to keep in mind — Dimensions, the size of your image in pixels, and File Size, how much storage space it takes up. Ultimately, file size determines how fast your image will load but the dimensions play a part in determining what that final file size will be. For Raster Images, you want to aim for 200 KB or less.

Since the dimensions in pixels affect the file size, you don’t want your images to be any bigger than they need to be. Currently, the conventional wisdom is that your images should never be larger than 2560px in either dimension. Ideally though, you should save your images to be the exact size they will display at. So if your design has an image that’s 600px by 500px, that’s the size you should export it as. You may also want to consider exporting smaller versions for smaller screens. Modern HTML allows images to easily be subbed in for different screen sizes, which has the added benefit that you can also provide different aspect ratios for Desktop vs Mobile.

When picking out your backgound images, you want something that will cover the area at larger screen sizes, but since background images are often covered by overlays and content, you don’t have to worry as much about image quality. As long as your image is at least 2048px to 2560px and of decent resolution, it will look fine.

For Vector images, you can save them  at very small dimensions and they will scale smoothly, no matter how big you need them to be. So there’s no reason to make your icon 500px when 50px will end up looking the same.

Saving Images In The Right Format

While the image dimensions play a part in determining file size, choosing the right file format is where you can get the most bang for your buck. Ya, you could just have Photoshop or whatever spit out all your images as lossless PNGs and call it a day but those are gonna be slow as shit to load. So first, let’s take a look at your options.

Image File Types

JPG or JPEG (Joint Photographic Experts Group):

• JPGs use lossy compression which gives them a decdently small file size. The trade-off can be a loss of quality.
• JPGs do not support transparency or animation.
• Used for: raster images that don’t require transparency or animation support
• Learn more about JPG

GIF (Graphics Interchange Format):

• First off, it’s pronounced gif, with a hard G as in Graphics, not jif, and I will fight anyone who says otherwise.
• GIFs are a lossless image format. They support transparency and are fine for simple graphics but are mostly used today for spamming the group chat.
• Used for: Animations and simple graphics
• Learn more about GIF

PNG (Portable Network Graphics):

• Another lossless image format that also supports transparency. PNGs mostly  replaced GIFs for graphics due to their superior compression, but they do not support animation. Even with their enhanced compression though, as a lossless format, they can have relatively large file sizes.
• Used for: Graphics or photography with transparency
• Learn more about PNG

SVG (Scalable Vector Graphics):

• This is a vector image format so images scale smoothly with no loss in quality.
• Supports interactions and animations.
• Generally small file sizes unless it’s a very complex graphic.
• Used for: Graphics and illustrations that need to be interactive or retain quality at a variety of sizes.
• Learn more about SVG

WebP (Web Picture — really, Google, that’s the best you could come up with?):

• Developed by Google, WebP was built specifically for the web. It supports both lossy and lossless compression, so it can do the job of a JPG or a PNG, usually at a noticeably smaller file size than either.
• Supports transparency and animation, which means it can replace PNGs and GIFs in a lot of cases too. Basically the Swiss Army knife of image formats.
• Supported in all modern browsers, and WordPress handles WebP uploads natively, so there’s really no excuse not to be using it.
• Used for: Pretty much everything. Photographs, graphics with transparency, and simple animations.
• Learn more about WebP

AVIF (AV1 Image File Format):

• The newest format to achieve widespread browser support, AVIF is based on the AV1 video codec and offers even better compression than WebP. However, AVIF files take longer to export, and very fine details can occasionally get lost at high compression.
• Supports transparency, animation, HDR and wide colour gamut, so your images can look sharper and more vibrant while still loading fast.
• It’s now supported by all major browsers, but it’s still recommended to provide a JPG or WebP fallback for anyone on an older device.
• Used for: Large, high-quality photographs and hero images where every kilobyte counts.
• Learn more about AVIF

So what file type should you use?

With new formats like WebP and AVIF, the answer to this has gotten simpler. Since they both have better compression than older formats, and support transparency and animation, there’s no need to use JPG, GIF, or PNG in most cases.

Should I save my image as a PNG?

Sure, a photograph saved as a PNG might be a little crisper but PNGs take up a shit ton more file space and can take longer to load so use them appropriately. Does it need to have a transparent background? Does it contain text or graphics? No? Then don’t save it as a fuckin PNG. Chances are the reduction in the quality you get from using a WebP or AVIF for is going to be negligible and the average user on most sites isn’t going to care. If you can’t use one of the newer formats, a JPG will still work as long as you don’t need a transparent background. Even then, you can usually just set the background colour of the image to match the background of the page.

So should you use PNG? Most of the time, no. PNGs might look great but they lead to huge-ass files and slow loading. There are better options these days.

Should I save my image as a JPG?

If WebP or AVIF are not an option for you, this is your next best bet for most images. You can still get decent quality at much smaller file sizes. However, if you need it to support transparency or animation, you’re shit out of luck.

Should I save my image as a GIF?

Again, only if WebP or AVIF are not an option for you, and you need it to be animated. GIF can also be used for transparency but it’s not really meant for photographic images so the quality is much lower than with a PNG. Also, if you image is a vector file, you’re probably better off using SVG unless it’s really complex.

Should I save my image as a WebP?

If you can use WebP, it’s a good solid option for most images. It’s been around a bit longer than AVIF so support is still slightly better and it takes less time to export images in this format.

Should I save my image as an AVIF?

Since AVIF is now widely supported, whether you should use it over WebP really comes down to a few things.

1. Export time: If your computer is slow as fuck, it will take longer to export images to this format. If you have a lot of them, you could be sitting there twiddling your thumbs for a while.
2. Platform support: If you are using a third-party platform or CMS for your website, double check that they support uploading AVIF files.
3. Audience: While AVIF does have solid browser support now, if your target audience has a tendency to use older devices, you’ll want to also include a fallback for your images in one of the older file formats. Frankly, that can be a bit of a pain in the ass.

Should I save my image as an SVG?

Only if your are saving a vector image. Ex: logos, icons, scalable graphics.

What do images in the different formats look like in practice?

Ok, so we’ve talked a lot about file sizes and output quality in theory, but what does that actually look like? Well, let’s save the same images in different formats and see.

PNG vs JPG vs WebP vs AVIF

For this test, the same image was saved in each format at 297px  by 600px, and with quality set to 100. You can click on each one to view it at full size.