Hey everyone! This is part 2 of the dev dives on images. Today, we’re going to focus on what Punchmark does to automatically make your images perform as well as possible. There are a few main things that I’d like to discuss: delivering images from a CDN, automatically optimizing images, and supporting WebP images platform-wide. I’ll also be giving a sneak peek into one of the big improvements we’ll be implementing in the future, so read to the end for that.
To ensure that images are loaded as consistently as possible, we serve them from a CDN, or Content Delivery Network. A CDN, in basic terms, stores content on multiple servers in different physical locations. This allows for two main benefits. Firstly, because the content is stored on multiple servers, it allows for a level of redundancy – if one server goes down, another server can still serve the content. Secondly, by serving content from a server that is physically closer to the user connecting, it decreases the latency between the server and that user. CDNs also store cached versions of the content, which further contributes to the speed benefits.
We talked a lot in the last dev dive about the ways to optimize an image, and we actually do some of that automatically with our new image optimizer tool in SiteManager. When you run the image optimizer, a few things happen. Firstly, any image that isn’t in the CDN will be added. Secondly, if the image is high resolution, the image optimizer will automatically remove some of the unnecessary resolution. It also converts images to WebP and compresses them slightly to minimize file size. If one of your pages is loading slowly, this is a great first tool to turn to. However, keep the principles from the last dev dive in mind – if you know that you can reduce an image even further than the image optimizer would, such as images that you know will never be served in a large format, don’t hesitate to do so.
Finally, we ensured that our platform supports WebP, and will automatically serve WebP images if the user’s browser supports them. I discussed the benefits of WebP in the last dev dive, but I’ll give a quick recap here. WebP has the best of both JPEG and PNG rolled into one. The file sizes are small, even smaller than JPEGs with the same quality, but WebP still supports transparency and looks good with graphic design and logos, like PNG. It is, without a doubt, the best image format for the web, but not all browsers support it. We’ve set our platform up so that we can serve all images as WebP if supported, but still fall back on the JPEGs and PNGs if not.
Now for the exciting stuff – what’s coming next? Our biggest goal coming up is to actually serve different sizes of the same image based on use case. For instance, it’s a great idea to upload nice photos of the pieces on your site. On the jewelry details page, this means that the piece can be shown off and look great. But on the grid, where the piece is never going to be shown in high resolution, all that does is to increase load time. Right now, we’re working on automatically resizing images to multiple resolutions, which then allows us to serve smaller images for performance while being able to still show off the high resolution when necessary.
This was another long one, but again, images are one of the most important parts of your website, both in terms of performance and user experience. Getting images right is a huge piece of the puzzle, and we want to give you all the tools that we can. Let me know if you have any questions, and if you have suggestions for future posts, put them in the comments!