How To Compress Website Images

Websites need images to add visual flair and maximise their appeal. Many early sites were dominated by black Comic Sans text against a white background, with only blue hyperlinks and flashing GIFs breaking the monotony. Modern cinemagraphs and dynamic backgrounds demonstrate how website design has blossomed over the last twenty years.

However, using graphics may cause other problems. Modern SLR cameras take 18-20 megapixel files, and even smartphones capture images that can be several megabytes in size. Inserting two photos onto a web page could increase its filesize tenfold, meaning it takes ten times longer to load up and display. This is unacceptable now that search engines factor page loading times into their rankings, with audiences abandoning incomplete pages after just three seconds. Even free website images might be unnecessarily large for your needs.

Whether you’ve taken your own shots or downloaded free website images, compressing these files is critical to optimising website design. Here is a potted guide to ensuring your pictures don’t take longer to load than they need to:

1.     Choose a photo editing package. Any program (even the recently reprieved Windows Paint) can save graphics in different formats, while also performing basic cropping and editing functions. Amateur coders and WordPress site builders won’t need anything more sophisticated than free tools like Fotor or PhotoScape. If you’d rather purchase a package, Corel PaintShop Pro and Adobe Photoshop are seriously powerful.
2.     Gather images into a single folder. If you end up with pictures scattered across your hard drive and the cloud, it becomes difficult to keep track of which ones have been edited. You might assemble a collection of free website images, home-sourced photos and Getty/Shutterstock purchases, all at different sizes and resolutions. Name each one according to the page it’ll be displayed on for added simplicity.
3.     Turn them all into JPGs. If you’re downloading free website images or taking pictures on your tablet, they’re probably already in this format. However, some online files are bloated BMPs and PNGs, while SLR cameras can capture high-definition RAW files. Converting other file types into JPGs will strip out unnecessary data and slash the file size. It’ll also ensure they display consistently across every output device.
4.     Resize them. Having assembled your army of JPGs, it’s time to compress them. Even a JPG might be 5MB, so view it at 100 per cent to gauge its size. Reduce it to twice the pixel length and width of the web page’s allocated space to avoid overly compressing it. Rename the file each time it’s resized, preserving higher-resolution copies in case you shrink it too much or want to upload a larger version at a later date.
5.     Test whether the images display well. On a 4K screen or Retina display, view the web page at 100 per cent and scrutinise each photo for signs of pixellation. Are areas of similar colour starting to look blocky? If so, you’ve compressed too far. Roll back to the previous version of your resized file, ensuring it looks crisp and sharp. Trial and error will strike a balance between compression and picture quality.