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.
Tiny PNG / Tiny JPG
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
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.
Nice post, you should carry it further and discuss what dimensions to use in the media settings in WordPress because that’s pretty confusing.
Thanks Mike! That’s a good idea. I think i’ll tuck that away for another follow up post. Perhaps later on this week. In response though, i’d probably set the images with the same underlying principle in mind. If you’re going for high density screens and your fixed page width is say 1024px, i’d probably do a large image size of 2048px with medium, small and thumbnail following suit. What are your settings that you typically setup?
Well I don’t have a typical setup as this is my first site I’m doing. But for example, for my blog featured images. I’m using a landscape image and I measured the pixels width of the content area, before running into the sidebar and I came up with 730. So I set the medium size to 730×730 in the media settings. and I cropped all my featured images to be exactly 730px wide. I don’t know if that’s the correct way to do it, but that’s all I could come up with. Image sizes are very confusing in WordPress. You have the regular media settings, and then you also have the WooCommerce product image sizes too if you have an ecommerce site. BTW, you should add a subscribe to comments option on your blog. If I didn’t check, I wouldn’t have known you responded to my comment.
In the past I have had issues with tinypng compressing too much. It makes the images really grainy. I recently found Imagefoo (http://imagefoo.com) to create my images. They compress my images for me. Now all I have to do is upload.
For compress the images to websites is very easy you can use the photo shop and there is an option which can compress the images in the chosen size. there is lots of peoples who using this one so i hope you do https://www.webhostingonedollar.com like this suggestion thank you so much.