Do you wish that your website ran faster?
Have you noticed that it is getting slower and slower and just aren't sure why?
Well it may be because your images are just too big.
What is the solution?
The solution is simple. You need to compress your images.
Yep, the biggest trick that I can ever offer you is to compress image size.
Yes, that takes time but time is what we are talking about here. Load time can hurt your SEO ranking in a big way. Even more, it can make readers leave your blog and never come back.
Considering how much time that you spent writing your content, that would be a shame.
In this tutorial you will learn how to reduce the file size of your image by simply resizing it and how to use a few image compression tools.
Why compress your website images?
Compressing your images is one of the best ways to speed up your website. Compressed images will make your blog load faster.
The objective of image compression is to reduce irrelevance and redundancy of the image data in order to be able to store or transmit data in an efficient form. ~Source Wikipedia
If you are in a hurry and load a large uncompressed image to your blog, your blog will start to run slow.
Why does this matter?
People are far more likely to hit the back button AND never return to your site, if it is slow to load.
Go ahead and test your website speed. This will help you figure out where you stand on your site speed.
So what exactly is image compression?
I think that the folks at Whatis.com said it best:
Image compression is minimizing the size in bytes of a graphics file without degrading the quality of the image to an unacceptable level. The reduction in file size allows more images to be stored in a given amount of disk or memory space. It also reduces the time required for images to be sent over the Internet or downloaded from Web pages.
In the end image compression is just making the image smaller.
When it comes to image compression there are two terms that you need to know.
What is lossy?
Lossy compression is a type of image compression that will make your image smallest. If you are purely focused on size this is the choice for you.
However, it does come with a warning. You will loose quality. So be prepared for that in advance because you can restore that loss.
What is lossless?
Lossless compression will compress an image and then restore it back to original quality. This means that your image will look as good as it did before compression. However, it will not compress as much, so the file size will be smaller but not as small as it would be with lossy.
Which compression type is best?
This is obviously subjective but my advice is to go with lossless. You quality will be a bit less but the size will drop dramatically. However, you should compare the two images and make a decision based upon how they look. If you are using text in your image, there may be a haze around the text when using lossy.
Does the image file type matter?
This is a question that I have read a great deal of debate on over the years.
Let's take a look at .jpg files compared to .png files. I created an image in Photoshop and then saved the image in both formats.
- The jpg file was saved at a quality of 9. The file size is 83 KB.
- The png file was saved smallest slow. The file size is 290 KB.
The image below was saved as a jpg. It was not compressed.
Can you see a difference in the quality?
Quickly Compress image file size by simply resizing the image
Tip: When compressing images it is a good idea to know what size of image fits in your blog best. For example, the featured image size for my ITB blog is 799 pixels by 390 pixels.
How can you quickly find out what image size would fit best in your blog?
Option 1:
- Open Chrome
- Go to where you purchased or downloaded your WordPress theme.
- Open up the demo and go to a blog post with an image.
- Right click over image with your mouse.
5. Click on Inspect
6. Scroll on the right until you get to the bottom
Note: The inspect area is split into two parts.
7. Note the size on the bottom right. This will be your picture size in pixels.
The reason that I prefer using the developers demo blog is because they have also optimized their image for height.
Option 2:
If you can't find the developers blog, you can follow the same steps on your own blog.
Note: Depending on how your blog design shows the featured image, you may want to adjust for the image height. Some blog designs will make the featured image as tall as your image is in actual pixels. This may not be optimal.
For a nice look and consistent blog, I recommend that your blog featured image always be the same width and height. Therefore, I highly recommend that you create an image template. If you are using an image tool such as Photoshop, then this will be easy for you.
A Free way to resize images:
PicMonkey is a great free tool that you can use to resize images.
Step 1: Go to PicMonkey http://www.picmonkey.com/
Step 2: Click on Edit
Step 3: Select the image from your hard drive
Step 4: Click on Resize
Step 5: Type in your desired image width (the first number on the left).
Note: make sure that keep proportions is checked.
Step 6: Click Apply
Step 7: Click on Crop
Step 8: Type in actual dimensions desired.
Step 9: Move the box that is overlaying the image to meet your desired crop.
Step 10: Click Apply
Step 11: Save Image
Step 12: Click Save to my computer
Add text to an Image using Picmonkey
Step 1: Click on the Text Symbol
Step 2: Select a font
Step 3: Click Add Text (above the font area)
Step 4: Type in your text
Note: You will see a pop-up that will allow you to change font color and size.
Step 5: Click on font and move it to desired location.
Step 6: Click Save
Step 7: Click Save to my computer
One of the easiest and fastest ways to reduce your image size it to resize it smaller.
How to best compress a Photoshop Image
- Open Image in Photoshop
- Click File
- Click Save for web
- Click 2-Up
Notice in the image above that the image type is set to JPEG.
The top image is the original image and it is 888k and the bottom image is at 60% and it is 41.63k. It is slightly pixelated but to the average eye, it will likely be perfectly fine.
If you are unhappy with your results, just up the quality. You can type over the 60 and make it 75. Then you will see a preview of the difference and the size (see the image below).
Once you are satisfied with your image quality, just hit save (the blue button at the bottom).
How to compress an image on a Mac
You want to duplicate image because you do not want to loss your original image.
- Double click on image in your finder
- Duplicate Image
- A. Click on File
- B. Click on Duplicate
- C. Rename image
- D. Click File
- E. Click Save
- Save Image to your desired folder
You want to duplicate image because you do not want to loss your original image.
How to resize an image on a PC using Paint
1. Run Paint
2. Open image
3. Click resize button
Free online image compression tools
Before you compress an image, you should always resize it to the optimal size first. This is why it is a good idea to always have a note with your optimal image sizes close by.
I have a sticky on my monitor that reminds me of the featured image size for my primary blogs.
However, do not stop there. If you are creating an in-post image make sure and resize those images appropriately as well.
For example, the "Keep It Simple Stupid" image is 300 pixels by 300 pixels. Uploading a 1200 x 1200 pixel image, would just add extra weight to the blog.
So for optimal image file size follow a 2-Step Method
Step 1: Resize the image
Step 2: Compress the image
How to use Compressor.io to reduce image file size
This is a free tool that is quick and easy to use. I prefer this tool over all of the options.
Step 1: Click on 'TRY IT!'
Step 2: Click on Lossly
Step 3: Click on Select File
Step 4: Select the file from your hard drive
File will automatically compress. There will be a slider that will show on your screen. You can slide it back and forth to see what happened to your image quality.
Step 5: Click on Download your File.
In the image below, you the compressed image and uncompressed image are side by side. Can you see a difference in the quality? The biggest difference is around the text.
However, considering the dramatic difference in file size (190.83 KB vs 45.71 KB), I am willing to live with the quality. How about you?
How to use Compress Jpeg to compress an image
Step 1: Upload a File from your computer
Compression happens immediately
Step 2: Click on Download
Step 3: Review compressed image
The original file size was 103 KB and the compressed file size is 53 KB. Can you tell the difference?
The uncompressed image appears a bit brighter but otherwise, the compressed image looks pretty good.
How to use Tinypng.com to compress an image
Step 1: Drag image from your hard drive into the dotted space
Step 2: Watch image compress
Step 3: Click on download (right of finished)
My recommendation are:
- Use a JPG file for blog post images
- Resize your images to required size
- Use Compressor.io to compress your image
So now that you know how to resize your image and how to compress your image, all that is left is to pick the perfect image for your blog.
“And please do me a little favor and share this guide with others, for there’s a good chance that it will help them with their blogs.”
Renee’,
Great tip. I agree completely. I have just recently converted all the images on my blog form 700×467 to 400×267 and got all of them to be less than 100k. That’s my goal. Very good tip, I think it makes worlds of differences on load time.
What is the idea k size? What do you recommend?
Fred,
That is a great tip. Keeping images less than 100k can make a real difference for site load time.
Blog on,
-Renee’
You really made this clear for me, Renee! Thank you. So helpful!
Glad that I could help Susan.
This was so timely for me Renee. My site was running more slowly and I needed to find some solutions. This gave me the necessary tools to get started. Thanks!
One question: the plugin “WP Smush.” How does it function differently than the two step process of resizing and compressing? I have that plugin and wasn’t sure if I should deactivate it before I begin the resizing/compressing process.
Thanks again for your practical advice!
Hi Aileen,
Well, WP Smush runs on your blog. My suggestions are to do off-site optimization of your images and then upload them. Wp Smush it is great for images that are already loaded though.
So my suggestion is to resize your images and compress them before uploading. Then if you have Wp Smush it will do a bit of extra magic.
Does that help?
-Renee’
Very nice guide, thank you very much for this! I recently learned from this: http://www.winzip.com/learn/file-compression.html how file compression actually works, but I was very interested to read more about it, and I came to the right place! :)
Joe,
That is awesome. Thank you for sharing that too.
Cheers!
-Renee’