Introduction:

Note: April 28, 2020: Apologies for the issue with images: the server which the images are served went offline. I am moving the images to a CDN, by midnight IST May 3rd, all images should be restored.

Have you ever wondered why you should compress (or reduce the size of) images on your site? After all, you want to display on your webpage the beautiful pictures you have taken in all their glory! But the downside of leaving images as “heavy” or uncompressed is that your site (or app) will load very slowly. I had written about how to use a CDN or content delivery network and a follow up post on the topic. You can consider the below post as a companion post because the theme is similar- how to load websites faster!

Image2go- interface in Hindi. Blog of Amar Vyas
I was pleasantly surprised to find that Image2go also has interface in Hindi

Note: You can read the companion post Which is the best image optimization service?

Why do you need to optimize the images?

  1. Improve website loading time
  2. improve search ranking
  3. For sites that are hosted Shared hosting site or small VPS plans: media files, take up space.
  4. Some pagebuilders or content management systems (CMS) do not allow remote e.g. loading of featured images. Inline images can be imported form URL, but not the feature image.Gtmetrix has a good explanation for why you should serve optimized images.Note: In the coming week, I will move all images from this post to a CDN I am begining to use more and more, i.e. Gumlet. Till then, you may find that the page loading is a little slow, because of the large number of images that are loading directly form this server. The current setup is by design!
Image by Amar Vyas identifying the top reasons for optimizing images for Websites
Why Should you optimize images for your website

One Image, Multiple Formats

Some of the challenges with serving images on your site or app are:
a. Images must be responsive (thumbnail, compressed, full size, etc.)
b. Not all browsers support WebP- google’s image format.
c. For websites, you need at least three screen sizes: Desktop, mobile, tablet.
d. Considering 3 sizes of images mentioned in (a) above and three screen types mentioned in (c) above,

you need to maintain atleast 9 versions of each image !

Fortunately, many image optimization programs or CDNs have built in features that help in serving the right image for the right screen size or on basis of bandwidth. You may have heard of a term called “Responsive Images”, that is, the size of the image changes as per the size of the screen. These programs also enable responsive images.

The impact of large images on websites

Let us look at a couple of examples of a site that are not optimized for speed. The below screenshots show very slow and in fact, poor loading speeds! On a scale of 100, a speed rating of 15 for mobile means that the site will take a very long time for loading. In the first image, which shows the results from gtmetrix, the first recommendation or the parameter (where this site gets an “F”, i.e. the worst rating) is “Serve scaled Images”.

screenshot : Webpage analysis from piio.com- showing imact of large images on speed of website. Blog of Amar Vyas
Webpage analysis from piio.com- showing imact of large images on speed of website

How to Optimize Images for your site?

There are many ways to optimize or resize images for your size. Many of these are free, others follow the Freemium model. Many of these require you to register before using the service.

Login page for Imgix-image optimizer. Blog of Amar Vyas
Login page for Imgix image optimizer

a. Do it locally on your laptop or desktop or phone

To achieve this, you can use an image editor, before uploading on the server. Depending on the software you use, your results may vary, and in most cases, the process is cumbersome and takes a lot of time. I would recommend this method as a last resort. On the Mac, the Preview app, or using a third party app like ImageOptim will give you quick (and often dirty) results.

There are open source tools like GIMP and Imagemagick that also do the job well, and across windows and Mac, and on cloud, there are resources like Adobe Photoshop. There are also command line tools from Shortpixel and http://resmush.it/ that do the job well, and you can create a script on Mac using Automator for the same purpose. I will not delve too deep into the topic of optimizing images on the desktop, because the main purpose of our post here is the different options available.

screenshot of Squash2 App for Mac for image resizing. Blog of Amar Vyas
Squash2 App for Mac for image resizing

This post is not a “How To Guide” but an introduction to the various options available for image compression

b. Use an Image Compression Website or Software as a Service (SAAS)

There are many fine options that help you compress the images or reduce the size. Some of them are:

*(Tinypng is an excellent alternative to Shortpixel, though its CDN seems pricey.)
You can also read this article from Mashable and this one from Envira Gallery to lean about some free, freemium, and paid options for compressing images. There are plugins available that resize the images after upload.

I would recommend using an image compression website if you have a small number of images to compress or resize. Also, if the images you are looking to scale down are general purpose images – like a travel picture, and do not contain any copyrighted or sensitive information. Below are a images from Compressor.io, simple image resizer, and imagecompressor.com

Image compression by compress.io
Image compressed by 67 percent- Compressor.io
Image compressed using Optimizilla service. Screenshot by Amar Vyas, amarvyas.in
Image compressed by imagecompressor.com
Image Compression via Simple Image Resizer website
Image Compression online using Simple Image Resizer

Tip: If you have a large number of images to compress, using a Software As a Service (SAAS) subscription makes a lot of sense. Many of these services offer a Freemium model (e.g. Tinypng) so it is a good idea to check them out before signing up.

c. Use a Plugin or a Script

When one mentions a plugin, the first thing that comes to mind is a plugin for a content management system (CMS) like WordPress or Drupal. because WordPress is one of the most popular CMS among bloggers, small e-commerce sites and photographers, there are a host of image optimization plugins available for WordPress. Some of these include:

Managed WordPress services like 10web have plugins for image compression. Blog of Amar Vyas
Image Compression Plugin – 10Web

d. Using a CDN or Content Delivery Network

Shortpixel Adaptive images is a great example, so are gumlet, optimally, cloud images, cloudinary, and a host of other options. For more options on using a CDN for images, you can visit my post on CDN that I published last week.

Image which is hosted, optimized and served from Cloudinary. Blog of Amar Vyas
The above image is hosted, optimized and served from Cloudinary. It has been intentionally blurred.

e. Using the in built image resizer in your CMS

Most CMS’es have this feature, where you can resize the images as per your theme or layout. WordPress. You can have advanced features like Maintaining the aspect ratio (that is, width” height of the image), scale by a factor or a percentage or scale images to a specified size. The CMS I use for this site (WordPress), as well as Bludit, also has this feature I have included a screenshot from the same below.

In  WordPress, Bludit CMS,  etc. you can define the dimensions of the images as you start uploading or before finalizing.
In WordPress, Bludit CMS, etc. you can define the dimensions of the images as you start uploading

f. Using an Image Hosting Service

One of the most popular service is Flickr, though there are other equally well known options like Imugr.

Image showing Blog on a blackboard, served from Flickr. Website of Amar Vyas.
This image is served from Flickr, using their embed code.

And since the season for mangoes is around the corner, here is an image of some delicious mangoes from Imgur:

Image of mangoes- Imgur.com
Image showing mangoes- served from Imgur

Other sources for obtaining some great images

Some great sources of obtaining images from Public Domain or through Creative Commons license are Wikimedia Commons, Pixabay, Pexels and Flickr. All of them provide the options of choosing the size of the image as per your need or liking. Of course, smaller the size or the resolution, poorer the quality, and vice versa.

While researching this article, I looked up sites like Imagepile (https://imagepile.com :Note -many images/ categories there are NSFW, use with caution!). You can upload your images there, and use the embed code for serving images from there. The image below is compressed, and reduced in resolution but you can see the quality is not that great. The full size image is too large to display and will have to be resized anyways!

I2T7Xu.jpg

Another site is Postimages.org. I have added two images below- one is at a higher resolution and size, the other is a thumbnail of the same image. The image below is my DIY recording studio by the way!

AVyas-Podcast-Setup-Apr2020-1
original image showing podcast setup from my Home Office
AVyas-Podcast-Setup-Apr2020-1
Above image, resized and served from postimage

g. Do It Yourself: Coding the parameters

This is recommended for advanced users only, though this could be a great way to learn basic HTML or CSS. There are plenty of resources to help you learn, but W3Schools has some great tutorials for beginners to try out.

Caveat: Image Compression is not Be-All-End-All

There are several factors that affect the performance of your website (or app). Robustness of the IT infrastructure, how busy the nodes on which your site is hosted, bandwidth of the datacenter, any service disruptions, use of a CDN, bandwidth and data speeds of the end user or visitor… the list can go on. Of course, use of other scripts or plugins in your website itself, and not optimizing the webpages themselves can cause sluggishness, as the image below shows. This is one of my own sites, by the way. And I am working on optimizing it in the days to come. Priority right now is to get some real quality content on it.

Summing it all up:

Serving optimized images is an art, a science, and a necessity. You can choose multiple options to achieve the end result, depending on your need, intended purpose, budget, and legalities (i.e. copyright or sensitive matters). One of the earliest posts I found on this topic was from way back in 2013, on htmlrocks.com.

Over the past few months,I have tried multiple options for image optimization/ compression over the years. My preference these days for optimizing images for website(s) is to use a CDN like Gumlet or an optimizer Shortpixer/ Tinypng.

Amar Vyas, April 2020

You can of course use the embed code from sites that host or serve images. There is no harm in using the more established ones like Flickr, or Wikipedia and use one of their custom sizes and the embed code, like I have done below. Personally I am not a fan of using embed codes from websites, and I have mentioned the same earlier. The downside is that if the image from the original site is taken down or replaced for some reason, you will get an error on your site. But that is an issue that can happen with your own image hosting setup as well. I will leave you with the below image and some resources as a “Thank you” for reading this post.

Resources:

Sitemap-Website-Amar-Vyas-May2020
Image hosted on imgbb

1. Image Hosting Sites. Most of them have a free or “freemium” option. Some may have restrictions or limitations on the type of images, resolution, etc. Below is an image hosted on imgbb.com, an popular image hosting site that provides embed code. The original image is 300 KB, but is posted here as a thumbnail. You can find the original image at https://ibb.co/kqGD3vK

Imageshack
Unsplash
Imageupload.net
Flickr.com
Imgur.com
Postimages.org
Imgshare.ioTinyimg.io

2. A very useful and detailed guide on image sizes, compression, and beyond: https://images.guide/

3. There is a useful guide from Wix on Free Image Hosting Sites : Link

4. Post from Themeisle on Image Compression: WordPress Image Optimizers Compared

5. For the technically inclined, here is some further reading: Sites like Resmush.it provide an API or a script that you can use as a ‘prefix” for your image, and then add parameters like quality, width, etc. to optimize the image.

Note: I only gave the command to reduce the quality of the image, therefore the size or resolution of the image is still large. This can be changed by adding the relevant parameters into the script.

Image compression - resmush.it | blog of Amar Vyas
Serving a resized or compressed image from resmush.it


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *