Reducing image file size is important for web pages. Smaller image size makes loading faster and therefore reduces waiting time. If your webpage takes forever to load, you may lose visitors who may become your customers.
Typically, the larger the dimension of your image, the bigger the file size will be. Therefore, image optimization is important before you upload any image to your web page.
High-resolution image for the web page?
You don’t need a super high-resolution image on web pages, and the difference is hardly noticeable on the device screen.
The exception is for a graphic designer doing a banner or poster artwork for printing purposes, which requires a high-resolution image for clear printing output.
Below are a few images of the breathtaking view of a mountain. By looking at the images below, can you differentiate which one has the highest and/or lowest file size?
Not easy, right?
As I said, the images look almost identical, although each has different file sizes.
Here are the sizes for each image:
Image A‘s resolution is 1920×1280 pixels with a file size of 527kb.
Image B‘s resolution is 800×533 pixels with a file size of 161kb.
After both images have been optimized, here are the file sizes:
Image C‘s (resolution 1920×1280 pixels) file size is 321kb
Image D‘s (resolution 800×533 pixels) file size is 101kb
As you can see, the optimized images save up at least 30%+ of the original file size. In many cases, it can save up to 70%-80%. And this is just for a mountain image; what if a page has 10 images? sometimes 30-50 images depending on the content’s length, which adds up quickly.
Therefore, reducing the image dimension size and optimization is important to speed up the loading time and improve visitors’ experience.
How to optimize your images?
Step 1: Reduce The Dimension
- Check your image dimension. In Windows File Explorer, locate your image and then right-click on the image and select Properties.
2. Click the Details tab, and the image dimensions are shown.
3. Knowing your image dimension, you can decide whether to reduce or use it as it is. The rule of thumb is for thumbnail or standard images on a page, 800 pixels width image is more than enough. In case the image is 1500pixels or bigger, you may want to resize it.
4. To resize the image, you can use the standard app on your computer, for example, the Paint program that comes with Windows.
5. Open the image with Paint. Click on Resize and enter your desired width (in pixels). The height (or vertical) will be automatically adjusted. Save the changes.
Step 2: Optimize The Image
- Go to tinypng.com and upload your image. You can drag and drop the image file directly on the area provided or click on the highlighted area to browse your file on your computer.
2. Once the file is optimized, it will be ready to download. Click on the download link to download the image file to your computer. This will be your optimized image; put it in a folder labeled “optimized” so you can find it easily.
That’s all it takes to reduce image size by adjusting the image dimension and properly optimizing your image. It is a simple, one-time task, but it goes a long way to ensure your images are properly optimized and not unnecessarily slowing down your web page.