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 SVGsI’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 a