How to easily resize your images to make your website faster

Shrink O'matic screenshot

Now that you know where to get great images for free, let's talk about how to manipulate them to keep your website fast. It is very important to keep your images as light as possible, since loading images is one of the main reasons that websites are slow. Also, for people using data to visit your site, downloading images can add use up data quickly. 

"Image size" refers to two different things

When talking about resizing images, we are really talking about two different things. First, there is the actual size of the image in pixels (which is closely related to the image resolution and how big it appears on the screen without being fuzzy), and second the size of the file, in kilo bytes or mega bytes (how heavy the file is or how much disk space it takes up). The first step is to resize your image to the maximum size (in pixels) that you need. For example, a small image floated to the right of your text rarely needs to be larger than 400 pixels. For example, the tinyPNG image below is 780 pixels wide. 

The second step is to optimize your file to make it lighter/smaller, so that it takes up less space and uses less data.

Also, it is useful to keep in mind that some file types are lighter than others. For example JPGs are lighter than PNGs. So, unless you need a PNG, you can convert your image to a JPG and this will make it lighter.

Three of my favourite tools to resize images

There are many ways to resize images and image files. Here are the three that I use the most. Two of them are online and the third requires that you download a small software on your computer. All of them are free.

TinyPNG

TinyPNG screenshot

TinyPNG is my "go to" website when I have several images to optimize, and I don't have to change the size of the images. The website allows you to drag and drop up to 20 images of up to 5 MB each. It compresses them right away and shows you how much the files have been reduced. Then, you can download the files one by one or together as a zip file. I like this site because it is very fast and does a great job.

Web Resizer

Web Resizer screenshot

When I only have a few images AND I need to manipulate the actual image (make it smaller and/or crop it), I use Web Resizer. It is a tool that has a few features while staying simple. After you upload your image, you can choose to crop it, you can choose the size of the new image and the level of sharpening if you need to. By default the system wants to resize the image to a width of 400 pixels. If that is not what you want, you need to enter the desired width and click on "apply". There are other features, but that is usually the only thing I use. Then, the system shows you an example of the newly optimized file with the file size. Web Resizer is very efficient and creates really small files. The down-side of it is that it only processes one image at a time.

Shrink O' Matic

Shrink O' Matic screenshot

Shrink O' Matic is a small, FREE, and very efficient piece of software. You will need to download it and also install Adobe Air for it to function. Once you've done that, you will enjoy a fast and efficient way to shrink large batches of images very quickly. There are a few advantages to using Shrink O' Matic. It is fast, you can choose the settings you want (and it will remember them the next time you open it), you can choose to rename your images and where to save them after resizing. I usually choose to add the suffix "_opt" to the images I have optimized. That way, I easily see optimized images. You can also rotate and also add a watermark on your images if needed, but this is beyond the topic of this article. If you upload image galleries with many images to the web, I highly recommend using Shrink O' Matic.

These are the basics of what you need to optimize your images for the web. Using these tools will make your images much smaller and your website loading time much shorter. Try them and let me know what you think below! ;)

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.