18 Of The Best Tips On How To Compress An Image And Why

Compress Images with these tools

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?

Compress images and speed up blog

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.

Compress images jpg vs png

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:

  1.  Open Chrome
  2. Go to where you purchased or downloaded your WordPress theme.
  3. Open up the demo and go to a blog post with an image.
  4. Right click over image with your mouse.
image size find it with Chrome

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.

Use chrome inspect element for image size

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

How to resize an image with Pickmonkey

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

Use PIcmonkey to resize an image

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

How to add text to a Picmonkey image

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

  1. Open Image in Photoshop
  2. Click File
  3. Click Save for web
  4. Click 2-Up
Reduce Image size with Photoshop

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).

use Photoshop to compress an image

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.

  1. Double click on image in your finder
  2. Duplicate Image
    • A. Click on File
    • B. Click on Duplicate
    • C. Rename image
    • D. Click File
    • E. Click Save
  3. 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

Use paint to resize an image

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.

How to compress an image

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!'

Compress your image with compressor.io

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.

compressorio image compression-tool-2

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?

Should you compress your images?

How to use Compress Jpeg to compress an image

Step 1: Upload a File from your computer

Compression happens immediately

compress image with compressjpeg

Step 2: Click on Download

free image compression tool

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.

review a free compression tool

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)

use-tinypng-to-compress-an-image

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.”

About the Author

Renee is wild for WordPress and on fire to empower small business owners with the inspiration, tools and strategies for a healthy blog. SMU CAPE instructor, developer, podcaster. Follow @Iteachblogging on Twitter. Get her FREE SEO Guide Here: https://goo.gl/gGrHC2

Leave a Reply 8 comments