Website speed matters! If you think simply having a website will bring in customers and conversions, you are misguided. You need to ensure that your website displays relevant and meaningful content, is easy to navigate, ranks high on search engines, and most importantly, loads extremely fast.
Popular statistics indicate that a website that takes more than 3 seconds to load completely witnesses increased bounce rates. Even a delay of one second in page loading can lead to a 7% reduction in conversions, a 16% decrease in customer satisfaction, and 11% fewer page views. If that doesn’t scare you, here are more stats to emphasize our point:
- 79% of online shoppers say they won’t go to a website again if its pages load slowly.
- 40% of visitors will abandon the website entirely if it takes more than 3 seconds to load; Google’s standard page loading time for websites is less than 2 seconds.
- Amazon performed speed tests which showed they would lose $1 billion every year if their site slows down by 1 second
- Google takes into account the loading speed when ranking websites on its SERPs.
Now that you’re convinced about the fact that website speed is crucial for the success of your business, you must take the right steps to speed up your website and one such step is image optimization.
Why is Image Optimization Important for Your Website?
There’s an adage – a picture is worth a thousand words.
If you look at some of the most successful websites, you’ll see a generous use of pictures on all of them. This is particularly true for e-commerce websites, blogs, travel portals, fashion websites, etc. According to experts, HTTP archive images make up for more than 60% of data loaded on the web pages. Needless to say, bulk images not only eat up disk space on the website’s web hosting server, loading heavy (large file size) images takes a lot of time and this can drastically impact a website’s overall loading speed.
Therefore, if you have measured your site’s loading time and it is above 3 seconds, you need to optimize the images on your website. Optimizing images generally means reducing their file size to help free some space on the web hosting server. This will help to process instructions easily and allow pages to load faster (if the server has low memory and disk space, it won’t get appropriate resources to process instructions as needed).
Now, there’s one important thing that needs to be considered when it comes to image optimizing. As you know, images are used to enhance the visual appeal of the website and effective dispersion of information. However, reducing image sizes can affect their quality, make them distorted or pixilated, and hurt the website’s look and feel. Hence, you need to strike a balance between quality (visual appeal) and size while optimizing images. For this, finding out the ideal image file size for a particular website is critical (every website can have a different ideal image file size depending on how critical the image is to its purpose).
What is the Ideal Image File Size for a Website?
To be honest, there’s no specific answer to this question. You need to consider several variables when deciding the ideal image file size for any website. A colorful image with vivid details will have a larger file size than a black and white image. Moreover, the layout of your web pages also dictates what dimensions (and consequently, file size) of images are ideal for your website.
To know what the ideal image size for your website is, you first need to validate the dimensions of the images stored on your site. Any image which you don’t feel needs to be cropped or resized after uploading can be considered to be of the correct size.
For example, some WordPress themes have a content area that’s about 750-850 PX wide. Considering this size, the maximum size of the image that you can upload shouldn’t be greater than 1,500 PX. Similarly other blogs may have post area width between 600px-750px. In that case, the optimal image width could be 800px. Now, if your website has a slideshow, the image size will be greater. A slideshow needs to have better quality images; thus, you need to have images that are at least 1024 pixels in width.
Now that you know the recommended image size for different websites, let’s see how to resize images in Windows and Macintosh computers.
Steps to Reduce Image Size
There are two basic steps to reduce image size:
- Resizing the image dimensions (length x width) that are generally measured in pixels. You have to try to make images as small as possible without compromising their quality.
- Compressing images to further reduce file size on the disk.
Now, let’s move on to discuss how to apply these steps to different operating systems.
Resizing Images on Windows
Windows offers the in-built Paint tool that allows you to resize images easily. To perform image resizing on Paint, follow these steps:
- Right-click on the image file and select ‘Edit’ to open the image you wish to resize in Paint.
- From the tool ribbon, click on the ‘Resize’ option to open the ‘Resize and Skew’ dialog pop-up. You will be presented with options like resizing the image by percentage or pixels. You can pick any of the options you’re comfortable with.
Most users pick the option of resizing by pixels since most platforms and experts mention optimized image size in pixels. Moreover, it is easy to type in a number in the horizontal and vertical field and resize the image to a given dimension (but when you do this, you should take care to uncheck the ‘Maintain aspect ratio’ checkbox).
In most cases, the resize by percentage is a trial and error option where you might have to resize the image a few times to get the exact dimensions you want.
Resizing Images on Macintosh
Like Windows, the Macintosh operating system also comes with an in-built app that can be used to resize images. Known as the Preview app, it’s quite easy to use and the process of resizing the image can be accomplished in just five easy steps:
- Open the image you want to resize in the Preview app.
- Click “Tools” and select “Adjust Size”.
- Check the “Resample” box. The tool is designed to automatically maintain the aspect ratio when the image is resized.
- Enter the desired width for the image and the Preview tool will automatically calculate the right height of the image.
- Click OK.
Once the image is resized, you have the option to save it in JPEG or PNG format.
Compressing Resized Images
The next step for optimizing images involves image compression. When you compress an image, its size on the disk is reduced by a few bytes, and the quality of the image isn’t affected. Two popular tools for compressing images are:
Optimole – It’s a real-time image processing tool that can automatically compress images as you upload them to your WordPress website. It can also optimize WebP images.
TinyPNG – It’s a manual image compression tool that can be used to compress images before uploading them to your website.
Optimole is a better option for compressing images that you want to use in your WordPress websites. You can install the Optimole plugin in your WordPress account to automatically compress the images you upload to your WordPress website. Besides compression, Optimole also implements a few performance optimization tactics like lazy loading, serving images through the Content Delivery Network (CDN), and converting them to WebP format. If you want to install Optimole on your WordPress account, you can do it easily through these steps:
- Access your WordPress Admin panel and go to the ‘Plugins’ section.
- Click ‘Add New’.
- In the search bar, type ‘Optimole’.
- Find Optimole in search results and click ‘Install’.
- When the plugin is installed, click the green ‘Activate’ button.
- Now the Optimole plugin is ready for use and you can start uploading images to your WordPress website.
Optimole is a premium plugin and you need to create an account on its official website to start using it. You can register for free and enter your details to get started. You will receive an activation link in your email. Once you click on the link and confirm, you can go ahead and access the tool’s dashboard where you will see the API key. You need to copy the API key into your WordPress Optimole dashboard to get access to the service. If your website has less than 5000 visitors per month, you can use Optimole for free.
If you’re using a different platform than WordPress to host your website, you can use the TinyPNG cloud-based image compression tool. TinyPNG is easy to use and the results are quite good. To use it, follow these steps:
- Access the TinyPNG website from a browser.
- On the home page, you will see a section that says “Drop your PNG or JPG file here.” To compress your image, drag the file from your computer and drop it in the compression box highlighted on the web page.
- TinyPNG will upload the image and start compressing it. It shows you the initial size of the image and the image size after compression.
- After the image is compressed, you will see a download link for the file.
In addition to saving to the local system, TinyPNG allows you to save the compressed file to DropBox. However, there are certain limitations to the use of this cloud-based compression tool. If you’re using TinyPNG as a guest user, you can only compress 20 images and the size of each image should not be more than 5 MB. You can register to remove this limitation. TinyPNG also offers a WordPress plugin that can be used to compress images just like Optimole.
Big is not always better, especially in the case of images on a website. Resizing images is a necessity to speed up your website. It doesn’t matter how well high-resolution images adorn your website, if the page loading speed is slow, visitors are anyway not going to wait around. As such, your hi-res images won’t serve their purpose and become a liability for your website. You can change this by optimizing your website’s images so that their size gets reduced but they retain their visual appeal.