{"id":2648,"date":"2024-09-20T17:04:56","date_gmt":"2024-09-20T17:04:56","guid":{"rendered":"https:\/\/nel-media.com\/en\/?p=2648"},"modified":"2024-12-24T10:45:48","modified_gmt":"2024-12-24T10:45:48","slug":"optimize-images-and-reduce-image-size-for-web","status":"publish","type":"post","link":"https:\/\/nel-media.com\/en\/optimize-images-and-reduce-image-size-for-web","title":{"rendered":"How to optimize images and reduce image size for web (before upload)"},"content":{"rendered":"\n

Introduction <\/h2>\n\n\n\n

Image optimization can involve compression, resizing, choosing the right format (e.g., JPEG, PNG, WebP), and implementing techniques such as lazy loading.<\/p>\n\n\n\n

All these measures contribute to creating a faster, more efficient, and more enjoyable website.<\/p>\n\n\n\n

Although we are focusing on the WordPress platform here, these techniques can be applied to any website.<\/p>\n\n\n\n

While optimization can be applied after upload using various plugins, it’s best to optimize images on your computer first.<\/p>\n\n\n\n

Why optimize images for a website at all?<\/h2>\n\n\n\n

Optimizing images for a website has several important advantages:<\/p>\n\n\n\n

Reducing server costs:<\/strong> Smaller images take up less server space and require fewer resources to serve, which can reduce costs, especially for high-traffic websites.<\/p>\n\n\n\n

Faster page loading:<\/strong> Unoptimized images are often large, significantly slowing down website loading times. Faster loading improves user experience and helps with SEO ranking.<\/p>\n\n\n\n

Reduced bandwidth usage:<\/strong> Optimized images consume less bandwidth, which benefits both site owners and visitors, especially those with limited data or slow internet connections.<\/p>\n\n\n\n

Improved SEO results:<\/strong> Page speed is a factor that affects SEO. Faster pages are more likely to rank highly in search engines, which can increase visitor numbers.<\/p>\n\n\n\n

Better user experience:<\/strong> Faster page loading, along with clearly displayed and properly sized images, contributes to a more pleasant user experience, which can increase user retention on the site.<\/p>\n\n\n\n

Choosing the correct format<\/h2>\n\n\n\n

The first optimization we can easily apply is selecting the format in which to save the image.<\/p>\n\n\n\n

Here is the size of an image saved in two different formats.<\/p>\n\n\n\n

<\/p>\n\n\n\n

FORMAT<\/th>SIZE<\/th><\/tr><\/thead>
PNG<\/strong><\/td>170KB<\/td><\/tr>
JPG<\/strong><\/td>41.8KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

So, for online publication, we recommend the JPG format.<\/p>\n\n\n\n

Use PNG only if the image has transparency and another format cannot be used.<\/p>\n\n\n\n

It should be noted that the PNG format can also have a certain degree of compression.<\/p>\n\n\n\n

However, due to the nature of the format itself, significant savings in size are not possible.<\/p>\n\n\n\n

Optimization using the TinyPng service<\/h2>\n\n\n\n

Additional optimization can be quickly and easily done using an online service called TinyPng<\/a><\/strong>.<\/p>\n\n\n\n

\"Tinypng<\/figure>\n\n\n\n

Simply drag and drop the image into the designated area, or upload it from your computer or mobile device by clicking on the space.<\/p>\n\n\n\n

TinyPng removes some information from the image to reduce its size.<\/p>\n\n\n\n

After TinyPng<\/strong> completes its job, it will show you how much the image has been optimized.<\/p>\n\n\n\n

\"tinypng<\/figure>\n\n\n\n

As you can see, the program does its job very well.<\/p>\n\n\n\n

Before<\/th>After<\/th>Savings<\/th><\/tr><\/thead>
170KB (PNG)<\/td>94.5KB<\/td>-44%<\/strong><\/td><\/tr>
41.8KB(JPG)<\/td>31.6KB<\/td>-24%<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

You will notice little difference in quality between the original and the converted image, but it now takes up much less space.<\/p>\n\n\n\n

Additional image optimization<\/h2>\n\n\n\n

Additional optimization can be done by converting to the WebP<\/strong> format, which will further reduce the file size of your image.<\/p>\n\n\n\n

However, while this format is excellent for compression, you must check whether you can use it at all.<\/p>\n\n\n\n

If you expect visitors to your website using older devices and browsers, they might not be able to view this format.<\/p>\n\n\n\n

Online Convert<\/h2>\n\n\n\n

The first option is an online service called Online Convert<\/strong>.<\/a><\/p>\n\n\n\n

Using it, you can convert not only to WebP but also between many other image formats.<\/p>\n\n\n\n

\"convert<\/figure>\n\n\n\n

You can convert up to 20 images at a time using the free version.<\/p>\n\n\n\n

The procedure is the same as with the previously described service, and the program will automatically download and save the converted image to your disk.<\/p>\n\n\n\n

Conversion using IrfanView<\/h2>\n\n\n\n

The second conversion option is using the previously described IrfanView<\/a><\/strong> image viewer and editor.<\/p>\n\n\n\n

\"open<\/figure>\n\n\n\n

Select the image and right-click to choose Open with > IrfanView<\/strong>.<\/p>\n\n\n\n

Immediately save the image in a different format by selecting Save> (original folder)<\/strong> and choosing the WebP format.<\/p>\n\n\n\n

\"irfanview<\/figure>\n\n\n\n

At the same time, the WebP format options will open, where you only need to ensure that the Quality option is set to about 75%<\/strong>, as this is the best balance between compression and quality.<\/p>\n\n\n\n

You can experiment with this option to get the best quality and size on disk.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

We have also created a table where you can see the savings you can expect.<\/p>\n\n\n\n

Without Optimization<\/th>TinyPng<\/th>Conversion to WebP<\/th><\/tr><\/thead>
170KB (PNG)<\/td>94.5KB<\/td>20.9KB<\/td><\/tr>
41.8KB(JPG)<\/td>31.6KB<\/td>19.2KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

As we can see, the savings are significant, without noticeable quality changes in the images.<\/p>\n\n\n\n

Reducing image resolution<\/h2>\n\n\n\n

What is resolution?<\/h3>\n\n\n\n

Image resolution refers to the level of detail an image can display and is usually measured in pixels.<\/p>\n\n\n\n

It is commonly expressed as the number of pixels in the width and height of an image, for example, 1920\u00d71080.<\/p>\n\n\n\n

The higher the resolution, the more detailed and clear the image, as it has more pixels to display information.<\/p>\n\n\n\n

When to reduce resolution?<\/h3>\n\n\n\n

For publishing on a website or webshop, it is advisable to reduce the resolution as much as possible.<\/p>\n\n\n\n

Here are just some examples:<\/p>\n\n\n\n

    \n
  1. You are writing a blog in WordPress and have defined the width of the blog page as 800 pixels.<\/li>\n<\/ol>\n\n\n\n

    The images you upload should not be wider than 800 pixels, as they will take up space without any visible difference in quality.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

      \n
    1. You are uploading product images to your webshop.<\/li>\n<\/ol>\n\n\n\n

      We have found that images 500\u00d7500 pixels are sufficient to display the product well.<\/p>\n\n\n\n

      If you have good (and expensive) hosting, they can be larger, up to 1000\u00d71000 pixels, but consider if the product has multiple different images.<\/p>\n\n\n\n

      Resizing using IrfanView<\/h2>\n\n\n\n

      Here we will convert images with more pixels to images with fewer pixels and lower resolution.<\/p>\n\n\n\n

      We will use IrfanView as before.<\/p>\n\n\n\n

      This is because, of all the programs we had on the computer, it worked quickly, and the saved images took up the least space.<\/p>\n\n\n\n

      Regardless of the image format we want to reduce, after loading, we must select Image > Resize\/Resample<\/strong> or press Ctrl+R<\/strong>.<\/p>\n\n\n\n

      \"irfanview<\/figure>\n\n\n\n

      This will open a new panel with options.<\/p>\n\n\n\n

      \"irfanview<\/figure>\n\n\n\n

      On this panel, the Current size<\/strong> option will display the current height and width of the image.<\/p>\n\n\n\n

      The option that should be enabled is Preserve aspect ratio<\/strong>, which means that the program will maintain the width-to-height ratio during conversion.<\/p>\n\n\n\n

      Another option worth enabling is Adjust DPI<\/strong>.<\/p>\n\n\n\n

      Since we are reducing the image, the program will automatically reduce the number of dots per inch, making the converted image smaller on the disk.<\/p>\n\n\n\n

      Now enter the width of the future image under the Width option, and the program will automatically calculate the height.<\/p>\n\n\n\n

      Using the sharpen filter<\/h4>\n\n\n\n

      If the image contains text, it may become poorly readable during conversion.<\/p>\n\n\n\n

      To prevent this, we must enable the Apply sharpen after Resample option.<\/p>\n\n\n\n

      This option will activate a filter that sharpens the image, so the text remains clear.<\/p>\n\n\n\n

      \"text
      Image without filter<\/figcaption><\/figure>\n\n\n\n
      \"text
      Image with applied filter<\/figcaption><\/figure>\n\n\n\n

      To see the difference, the image of the text below has the filter applied.<\/p>\n\n\n\n

      We leave it up to you to decide whether this filter is useful or not.<\/p>\n\n\n\n

      Batch image conversion<\/h2>\n\n\n\n

      Yes, it is possible to edit multiple images at once (Batch conversion).<\/p>\n\n\n\n

      To do this, open the folder with the images for conversion, select one image, and right-click to choose \u201cOpen with IrfanView\u201d.<\/p>\n\n\n\n

      When the program opens, press the \u201cb\u201d key.<\/p>\n\n\n\n

      This will take you to the screen for batch image conversion.<\/p>\n\n\n\n

      Select all the images you want to convert.<\/p>\n\n\n\n

      Do this by pressing the \u201cCTRL\u201d key + left mouse button<\/strong>.<\/p>\n\n\n\n

      By pressing the \u201cAdd\u201d<\/strong> button, all selected images will appear on the bottom screen.<\/p>\n\n\n\n

      With the \u201cAdd all\u201d<\/strong> button, you can select all the images in that folder.<\/p>\n\n\n\n

      \"Irfanview<\/figure>\n\n\n\n

      Now we need to specify what we want to do with the selected images.<\/p>\n\n\n\n

      Conversion options<\/h3>\n\n\n\n

      Under conversion options, you can choose:<\/p>\n\n\n\n