Before we talk about how to compress your website images, it’s important to know that there’s a lot of reasons a website could be slow. We’re WordPress fanatics over here and we spend a lot of time figuring out how to make WordPress go faster. This tip isn’t a WordPress specific tip. You can take image compression and use it to help just about any website load faster.
Before we dive into how, here’s just a brief why.
Why you should compress your website images.
Most cameras and phones today shoot pictures that are big enough to print on a billboard. But if you stop and think about it, you’ll realize your website isn’t going to be viewed on a billboard sized screen. It’ll likely get viewed on a phone, tablet or laptop. Hobo-Web has some good stats on current screen sizes. When you make your images device size appropriate, it means that the files are smaller which means it takes less bandwidth and speed to load your site which means faster loading for your visitors.
General Rule: Smaller image size means faster website.
But you can also take this too far and make images so tiny, that they just aren’t very usable. Take that too far and you’ll end up with these cute, but tiny houses. I think you get the idea.
So what is the right image size then?
This is a difficult question to answer because there isn’t a right image size. But if we were to come up with a Golden Number, we’d say
the perfect image size is, 2280px X (proportional height)
* Super Nerdy, skip ahead – So for your techno geeks, you’re asking “Why is that so perfect?! JUSTIFY IT!” Here’s my rationale. A popular grid is 12 column, 1140px wide. If you want to support high density (retina) displays, you’re looking at roughly double density. If you assume that most images will need to fit within that 1140px grid, then you end up with double 1140 = 2280px. It keeps your images sharp and not excessively large. That is my rationale and i’m sticking to it!
How to resize your images
Alright, so the first part to getting your images down in size is resizing them. This is not the same as compressing them. Compressing is taking the images at their current dimensions and using special computer magic to make them smaller in size. Resizing is actually take the dimensions of the image and making them smaller. Compression often degrades quality, but we’ll talk about that in a second.
Resizing in Photoshop
1. Open up your image. Head to the Image Menu and choose “Image Size.”
2. From Image Size, Dialog box, be sure to check “Constrain Proportions” – this just makes sure your images don’t get squished or squeezed. (I hate squished images) Then set the width to the Golden Number 2280px.
Press “OK” of course and then proceed to re-save your image. I’d recommending using the “Save for Web” feature in Photoshop.
3. From the Save for Web dialog, here’s a screenshot of my usual settings. I’m not super concerned about the compression here only because this isn’t my final step. I let Photoshop it’s usual “good enough” compression. Save it out and that’s it for Photoshop.
We’re done with the Photoshop stuff, now it’s onto compressing the images.
How to compress your images
This isn’t much of a How-To. I’m really just pointing you to a couple of my favorite compression websites. But here’s why compression is important. Online Image Compressors do an amazing job of taking your photoshop saved JPGs and PNGs and bringing the file sizes down to the smallest possible size without degrading the quality for on-screen viewers.
In the test i’m showing below, I took a ~4MB image and brought it down by about 85-90%. That means that it’s going to take 90% less time for that image to load. If your original image would have taken 30 seconds to load, it’d now take 3 seconds. That’s a BIG deal! Here’s why it’s a big deal:
- People leave websites because they’re too slow.
- Your website loses impact when people can’t see the images.
- Compressed images make you a responsible web builder.
- If you have a high-traffic website, you save money and storage.
Here’s my not so secret tools for image compression.
Here’s an screenshot of my 4MB image and the result of TinyPNG compression.
Take note of how happy that Panda is! That alone is worth compressing your images. I’ll let the screenshot speak for itself.
Compressor.io usually does better with JPGs. In these tests it didn’t. I’ve used both HUNDREDs of times. You can’t really go wrong with either. It’s preference. There’s also other sites you can use as well as plugins for WordPress.