The phrase ‘bigger is better’ holds especially true with website imagery these days. Modern website design is all about big imagery that evokes emotion and peaks user interest. However, with larger images comes larger file sizes, especially if you’re using PNGs. These large file sizes require more bandwidth, creating longer loading times for both mobile and desktop. Google doesn’t like this and is punishing offending by lowering their search ranking score. This is an especially big deal when you consider the recent algorithm change, which the internet has dubbed ‘Mobilegeddon‘.
So what’s a designer to do? If you’re using PNGs not much. With JPEGs you can reduce your files sizes by lowering image quality, but who wants to do that? By using a nifty piece of technology called TinyPNG, you can shrink your image file sizes with minimal quality loss.
What is TinyPNG?
TinyPNG is an online tool, that uses smart lossy compression techniques to shrink file sizes for both PNGs and JPEGs. Simply drag your PNG or JPEG into the designated area and watch TinyPNG work its magic.
Can you tell the difference?
Below are two images. The left image is the original PNG, on the right is the same image processed by TinyPNG. There is over a 70% reduction in file size and you can barely tell the difference! Now 100kb savings might not seem like that big of a deal, but compressing hundreds of images on your site can add up to significantly faster load times.
Photoshop and WordPress Plugin
If you have a lot of images to compress on a regular basis like we do, I recommend the Photoshop plugin. TinyPNG has a paid Photoshop plugin ($50), that allows you to preview and save compressed PNG and JPEG images straight from Photoshop. TinyPNG is compatable with CS5, CS6, and CC. If you’re someone who only needs to compress a few files here and there, the web tool is free. However you’re limited to 20 images and a maximum file size of 5MB.
TinyPNG is also available as a WordPress plugin that automatically compresses all your uploaded images on your WordPress site, making it faster and more Google-friendly.
Give it a try! Head over to Tinypng.com and see it in action.