Selecting the Right Image Type to Improve Site Performance

It’s hard to know which type of image will best help you optimize your site’s performance. Front-end Developer Patrick Weston breaks down four different image types and assesses the function and benefits of each kind.

TRANSCRIPT

Allison Manley [AM]: Hi and welcome back to this week’s Secret Sauce, a short podcast by Palantir.net that offers a quick tip on some small thing you can do to help your business run a little bit better.

I’m Allison Manley, an Account Manager, and today’s advice comes from front-end developer Patrick Weston, who has some thoughts about dealing with images on the web.

Patrick Weston [PW]: Hi, I’m Patrick, and I’m going to be talking about images on the web.

The web is really progressing forward and evolving, and as developers we tend to take data and speed for granted. We normally work at businesses and offices with really fast broadband connections, but that might not always be the case for all users. Responsive web design has really focused on mobile first, and a lot of times these mobile users are data capped or have their data limited. And they can also be in remote locations on slow connections.

Images are often the largest asset on web pages. So if you make improvements with images, you can really make large improvements with your site speed and performance.

I’m going to talk about different types of images, when to use which, and some general tips for improving your site with regard to images.

First, I’m going to cover two different types of categories. There are:

• Lossless vs. lossy compression

  • Lossless as the name implies, is no loss of data. So these are images where the source feed is the exact same as the outcome.

  • But lossy compression allows you to lose some quality at the sake of file size.

• There are also vector graphics vs. raster graphics

  • Vector graphics are defined mathematically. For example, a line starts here, and ends here 10 pixels over.

  • But Raster is defined pixel by pixel, so you can think of it as kind of a 2D grid with different colors at each pixel.

So now I’m going to talk about the different types of images that there are. There are four main types:

• PNGs

• JPEGs

• Gifs

• and SVGs

I’m going to go through each one and kind of talk about their strengths and weaknesses, and then I’ll recap about when to use each type.

PNGs are the first type I’m going to talk about. They are a lossless file format, so you don’t lose any quality. And they are also raster, so they are defined pixel by pixel. But the benefit with PNGs is that they have what’s called an alpha channel, so this allows for transparency. If you’re using transparency on the web, it’s likely a PNG. And this alpha channel is a scale of transparency, so it can have different values of how transparent the image actually is.

The next are JPEGs. These are kind of the workhorse. This is one of the most common file formats, and it’s a lossy file format, so you can have some loss of quality, but also save image size at the same time. They are raster, so they have a 2D grid of pixels, and they don’t have an alpha channel, so there’s no transparency.

The next type are GIFs. They are also lossless and raster. They do support transparency, but it’s  kind of an on/off switch, so the pixel is either transparent, or not transparent. So you do lose some quality here with the transparency. But the main thing that makes them famous on the web is that they support animation. So if you’re looking for kind of a simple animation, GIFs are a good way to go.

Last you have kind of a newer file format that’s beginning to be more popular on the web , and that’s SVGs. They are vector graphics, so they are defined mathematically. You have shapes and sizes, different line widths, thicknesses, colors . . . they’re really versatile.

These four file formats are kind of confusing, and there are different approaches to when you want to use each of them. So the real key is to kind of figure out what image is best for you.

If you need any sort of animation, GIF is the only option. It’s the only one that provides animation without using a video format.

If you need any sort of transparency, PNG is probably your best bet because it gives you that alpha channel for transparency that is a nice scale rather than just an on/off like GIF provides.

But if you have an image that’s a photo or a scene, a JPEG is probably your best choice. And JPEGs are probably your best choice just by default (unless you don’t want to lose image quality, in which case a PNG is also a great choice). The great thing about JPEGs is that you can set the quality.

If you have something that needs to scale well . . . a logo, or something with simple shapes and colors . . . then go with an SVG, because they can have really small file sizes.

Other alternatives that you can use include CSS. A lot of times you can do gradients or background images, and you can avoid images all together. Or if you have a logo you can use text or a web font.

And there are also some great approaches that are starting to come out, and become more popular, for responsive images. One is called  “Srcset.” It allows you to define different images depending on the width of your browser. There’s also the picture element. And Drupal also has a great responsive image module that’s new in Drupal 8. You set up different images sizes and styles, and then tell Drupal when to apply each.

But all of these really depend on having a really good source image to begin with. You can do all sorts of responsive tricks and things. But if your source image isn’t the right type and isn’t optimized, it’s not going to be a good result.

There are lots of types of images out there. But with a little thought, and with the help of some new best practices and automation (like Drupal’s new responsive image module), you can create a great, fast-loading site for all users regardless of screen size or internet speed.

AM: Thank you Patrick. That’s it for this week’s Secret Sauce! For more great tips, follow us on twitter at @palantir, or visit our website at palantir.net. Have a great one.

Helpful links

Image types and when to use them:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en

Configuring Drupal's new responsive image module:

https://www.advomatic.com/blog/adding-responsive-images-to-your-drupal-8-site