Image resizing is commonly overlooked for numerous reasons, simply because some say it takes too much time. Would you rather spend more time on a task or have a sluggish loading webpage causing a high bounce rate? We put together 5 tools that will make your life easier and optimize speed and conversions.
Optimizing web images is a process of delivering the high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size.
The importance of images in connecting users to your products has been proven. If your website takes more than 3 seconds to load, users are more likely to abandon it, which will drastically increase your bounce rate, and eventually affect your conversions.
Top 5 Free Online Image Resizing Tools
Befunky - BeFunky is a great free image resize tool because it offers a lot of options. You can choose basic photo resizing and editing for free. If you want more options, you can upgrade your account for a monthly fee. This will get you access to options like photo filters and effects, touchups, frames, text, and more. With the free option, you can resize your image by width or height, or by percentage scale.
Rsizr - This tool offers an option that many free image resizer tools don’t offer. You can crop a certain part out of your image, and then resize it too. This can be helpful if there’s too much white space around a product, or if you want to remove a person from the side of a photo. You can also rotate the image to the right or left.
Simple Image Resizer - This is as it says, simple. You can select your image, choose if you want to resize based on dimensions or percentage, choose the pixels or percentage number, and then click Resize. Be careful with the dimensions option, because it doesn’t offer the option to automatically keep the proportions. This might lead to a distorted or weird-looking final result.
B.I.R.M.E. - B.I.R.M.E. stands for “Batch Image Resizing Made Easy.” This bulk image resizer has two versions: version 1 and version 2, which is newer. Both versions can help you resize several images at one time, instead of doing them one by one. You can also add a border to each photo. Just choose how many pixels thick you want it to be.
Online Image Resize - This simple image resizer tool is great if you find some online image resizers to be confusing or difficult to use. There’s just one option: choose one or more photos, and then choose the width that you want all of them to be. The minimum is 16 pixels and the maximum is 1024.
Check out this article by the University of Minnesota Duluth that perfectly demonstrating the effect of resizing images and how to resize images online.
E-commerce Case Study
Page load speed is the amount of time taken by a web page to load completely. It depends on many factors ranging from your website host to website layout and design. The websites having less than 2 seconds load speed are most loved by its users. So, if you are optimizing 64% of your website’s weight, which is images, you will be improving your website speed.
For instance, Walmart found out they were the fastest retail website compared to sites like Amazon or eBay. They decided to increase even more their speed performances and it results that:
- ‘For every 1 second of improvement, they experienced up to a 2% increase in conversions
- For every 100 ms of improvement, they grew incremental revenue by up to 1% (Source)
The number of web shoppers in US alone in 2019 was 224 million and is to reach 230 million by 2021 (source: Statista) which will equal 90% of all internet users in US.
Scaling vs. Resizing
Not all of our images are the exact size we need them to be, so it's important to understand how to properly resize an image and how resizing works. When an image is resized, its pixel information is changed. For example, an image is reduced in size, any unneeded pixel information will be discarded by the photo editor.
When working with raster images (pixel-based) it is important to understand that scaling an image in programs, such as Word or Powerpoint, does not actually resize the image, but rather stretches images larger or scales them smaller. When scaling, the resolution is not adjusted to best suit the new size, rather the pixels are stretched and can appear pixelated.
The most common side effect of scaling an image larger than its original dimensions is that the image may appear to be very fuzzy or pixelated.
Scaling images smaller than the original dimensions does not affect quality as much but can have other side effects.
If you upload a very large image to a website and scale it down to a smaller size, the website still must load the full-size version of that image and could cause the web page to load more slowly.
- Right-click on the file in the Finder > Click Get Info > Under the "More Info" you will see the dimensions of the image.
- Right Click on the file > Click Properties > Click Details!
- A very small amount of scaling can be OK, specifically when scaling down. However, we strongly recommended resizing images in free picture resizing tools.
- Vector graphics (such as clipart and charts in Word or Powerpoint) are not comprised of pixels and therefore can be stretched to any size without loss of quality.
How to Analyze Page Speed
That free tool is pretty famous as it delivers insights about your load time issues. From bad CSS to images to browser caching to plugins, PageSpeed Insights analyzes the most important factors that can damage your load time stability for both desktop and mobile websites.
Another relevant tool that provides feedback on your page speed. Its graphs quickly show you which files are lowering your performances. Also, it offers a ‘Performance Tips’ area with relevant info.
With that tool, you can pick a location from where you want to load your website. You can thus optimize your page speed for different devices or locations.
Want a website redesign for 2020? Contact us today.