YOu can listen to the audio version of this post by clicking below
The Importance of Optimizing Images for websites:
Note: You can read the companion post Which is the best image optimization service?
Why do you need to optimize the images?
- Improve website loading time
- improve search ranking
- For sites that are hosted Shared hosting site or small VPS plans: media files, take up space.
- 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!
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”.
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.
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.
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 compressed by 67 percent- Compressor.io |
|
| Image compressed by imagecompressor.com |
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:
- Tinypng
- Shortpixel and Shortpixel Adaptive images
- Optimole (Note: I have posted a mini review of Optimole WordPress Plugin on Underworldstartup.com)
- EWWW
- Imagify
- WP Smush IT
- 10Web Image Optimizer
- Modula Speed UP Plugin
There are many options for image optimization plugins for WordPress sites
Image Optimization plugin for 10Webd. Using a CDN or Content Delivery Network
Shortpixel Adaptive images is a great example, so are gumlet, optimaly, 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.
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.
f. Using an Image Hosting Service
One of the most popular service is Flickr, though there are other equally well known options like Imugr.
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:
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!
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!
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:
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
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.