Rebuild Part 5: Automation

by Jack Pritchard

Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!

Recent studies have shown that the majority contribution to the file size of a website or web page falls to imagery. For you see most website will embed images as background images, icons, display them within posts. Without pictures, the internet would be a very empty but quick loading platform. Now my personal website is no exception to the rule if anything my site centres around imagery more than the average website will. If only there was a way I could add automation of keeping the file size low...

Automation of Image Compression

#

Now while many developers may know, I didn't know until starting my full-time job that images can and should be compressed for the web. Tediously going through each of the pictures in Adobe Photoshop and finding the perfect balance between file size and quality was never something I got excited about. That is where one of my favourite websites comes into play. TinyPNG - https://tinypng.com/. TinyPNG offers a great website that allows for the compression of 20 images at a time; each image looks almost identical, if not it is identical on export as it was on import. The only difference being the major drop in file size.

Wordpress Plugin

#

Fortunately for WordPress developers and soon hopefully a range of different other platforms, there is an API, or for WordPress a plugin built by TinyPNG. This plugin will automatically scan through your media library and find uncompressed images that it can compress for you. The compression API is great if you have multiple image sizes, as do most Wordpress websites. For you see I can compress my thumbnail, small, medium, large and original resolution images without loading each one through Adobe Photoshop. I do warn that if you want to use this plugin that you have a maximum of 500 compressions per account/email. After that, you will have to pay. I easily created a couple of accounts adding + before the @ in my email and before you know it I have compressed all of the images on my website with a total of 81.2% compression on my media library. Join me in Rebuild Part 6: Mobile First where I start to examine how my website will tailor for those on mobile screens and pay as you go data networks.