Hey everyone! For our dev dive today, I want to talk about images. Chances are that if you’ve ever looked into optimizing your website, images are the first issue mentioned. As a professional photographer myself (when I’m not developing websites, of course), making sure that my images look great is really important to me, but the unfortunate reality is that the nicer your image, the longer it’s going to take to load. So today, as the first part of my two-part series on images, I want to talk about what you can do to make your images as speedy as possible while still looking excellent. We’ll be talking about the three factors that determine the size of an image (resolution, file format, and compression level) and how they can be optimized.

First up: resolution. Most of you probably know this already, but this is the measurement of how many pixels make up your image. With a couple exceptions, such as SVG, all images work exactly the same for every file format. A 600x600 JPEG has no difference in resolution from a 600x600 PNG, TIFF, etc. Smaller resolutions make for smaller file sizes, because each extra pixel is one more piece of data that needs to be stored. The trick here is to know the maximum resolution that each image will be served at, and to size your images accordingly. There’s no point in uploading an image that’s 3000x2000 if it’s only ever going to show up as 150 pixels wide.

File format is a bit trickier, because there isn’t really a one size fits all answer here. All image formats have their own strengths, so I’ll briefly touch on the biggest formats and their main pros and cons.

  • JPEG: JPEGS are great for photographs. The compression algorithm for JPEGs is specifically designed for real photos, meaning that JPEG file sizes tend to be smaller than other formats while still looking good – in most cases. Images with a lot of flat colors or simple shapes (think logos or other graphic design) tend to show compression artifacts if compressed too much as a JPEG. JPEG also doesn’t support any kind of transparency, so it’s definitely not recommended for logos.

  • PNG: PNGs are best for logos and graphic design. The compression isn’t as aggressive as JPEGs, so artifacts don’t show up nearly as easily, and PNGs support transparency! However, because the compression isn’t as aggressive, PNGs are generally larger than JPEGs for similar images, so make sure that you need the extra benefits of PNG if you’re going to use it.

  • WebP: The newest format here, WebPs is the best of both worlds. They’re even smaller than JPEGs, but support transparency and still work well for logos. Unfortunately, a lot of browsers still don’t support WebP. Punchmark is actually putting native WebP support into our platform, so if someone visits your site on a browser that supports WebP, we’ll serve all of your images in that format. Otherwise, we can still pass through JPEGs and PNGs. Essentially, don’t worry about uploading in this format – if it makes sense to use, we’ll use them automatically.

  • SVG: This one’s a bit weird - SVG stands for Scalable Vector Graphics. The key word there is Vector; SVGs don’t use pixels. The plus side of this means that SVGs naturally scale as large or small as they need to and the file sizes are generally less than half that of a JPEG or PNG, but they really only work well for simple images. Support for SVGs is also somewhat unreliable and you only get the benefits if your image was designed as an SVG in the first place, so unless you know what you’re doing, best to avoid these. We do have a couple of clients who use SVGs for their logos, however, so at least know that it’s an option.

Compression is the final piece of the puzzle, and the one that will generally take the most trial and error. If you edit your image in a fully featured editor such as Photoshop or GIMP, you’ll notice that when you save your image, there are options for the level of quality that you want. In general, you want to go as low as you can until you just start to notice the image quality degrade. Even if there are a few artifacts, almost nobody will notice when visiting your site. But also, keep in mind the use case for your image. If it’s the first slide on a full-page banner, you may want it to look just a bit nicer. If it’s a stock image on a landing page, you can probably get away with it not looking quite as good.

This has been a bit of a long one today, but images are very important to me and I hope that everyone learned something! Next week I’ll be going over how we handle your images on our end, and the optimizations that we have in place now as well as plans for the future.