Click below for the audio version of this post
>Note that I did not intend to make this post too complicated for most readers Therefore, I have taken the ‘middle ground’ approach: in the process, I have skipped the technicalities, and focused on the main theme – discovery by accident.
My objective was to create a WebP image similar to the one above.
(If you do not see the image, then your browser does not support the WebP image format)
Backstory: Header Images for this site
Every time you click a new link on this website, a you will see a different header or an image at the very top. The header images in this blog are a collection of 25 different patterns that appear in a random pattern. These images are in the jpg format, almost all of them are under 150 kilobytes in size. This approach works well for good visual experience to the visitor. There is an obvious downside to it. When a visitor clicks a new link, new image is loaded. If you are a visitor, your device will consume bandwidth and require more storage space. For the server that hosts my site, that would mean more cpu cycles and bandwidth usage. On the contrary, if I had a single header image (or even say 4 or 5 for that matter), the header image would be stored on your device once in the cache. Every time you click on a new link, that image will be now served from your device (or the CDN) instead of a new image every time.Is there an optimum number of Header Images?
My long term goal is to limit the number of header images. Maybe 8 or 10 at the most. I will most certainly not 25 keep different images in the weeks to come. But till then, is there a way to reduce the size of the images further? Website speed test to the rescue Most website SEO (Search Engine Optimization) tools recommend these days that the images should be served in WebP format. I have written on this topic in the past, my most recent post was last week! I have written about using the `cwebp` command to convert jpg images into WebP format in an earlier post. Today, I decided to use Imagemagick to achieve the same result.How to convert images to WebP using Imagemagick
Imagemagick is an open source tool for editing, creating images as well as changing their format, say from `jpg` to `png`. You can do so using the graphical tool or even the command line. I like using the latter option. I used the `convert` command using Imagemagick in the Linux terminal. It gave me some interesting results! The sequence of commands went something like this: First I checked the list of images in the folder.$ls ✔ ..... AmarBlog-HeaaderBanner10-Jan22-min.jpeg AmarBlog-HeaaderBanner22-Jan22.jpeg AmarBlog-HeaaderBanner11-Jan22.jpeg AmarBlog-HeaaderBanner23-Jan22.avif AmarBlog-HeaaderBanner12-Jan22.avif AmarBlog-HeaaderBanner23-Jan22.jpeg AmarBlog-HeaaderBanner12-Jan22.jpeg AmarBlog-HeaaderBanner24-Jan22.jpeg AmarBlog-HeaaderBanner13-Jan22.jpeg AmarBlog-HeaaderBanner25-Jan22.jpegIn order to convert the images to webp format, I typed:
$~/Doc/Banners convert -quality 80 *.jpeg *.webpSomething did not seem right to me about this command, but I went ahead anyways. The terminal output did not give any errors, so I assumed that the images were converting well. So I looked for WebP images in that folder.
$~/Doc/Banners ls *webp ls *webp ✔ AmarBlog-HeaaderBanner13-Jan22.webp AmarBlog-HeaaderBanner1-Jan22.webp AmarBlog-HeaaderBanner14-Jan22.webpTurns out, only 3 of the 25 files had converted to WebP. More interestingly,the output for one of the images actually an animated image! Note that the images are flashy, the changing colours and pattern can be a visual distraction and an eyesore.
Introducing: The “Law of Unintended Consequences”
Recap: website speed and performance
I have written on this topic in the past, but let me state here briefly speed of a website and how it performs play a big role in improving traffic to a site. By speed, we mean how fast the pages and content loads. When it comes to performance, the criteria include: -is the site easily accessible? -is it easy to view on a mobile device,? -does the website go down frequently? etc. Ever since I moved this blog to its own subdomain `blog.amarvyas.in`, I have been working behind the scenes to improve the website loading speeds. Having moved to a Shared Hosting platform, it becomes even more imperative to keep the site as lightweight and clean as possible. This includes using a Content Delivery network for images and scripts, optimizing the size of images, and some other measures. About this article This post was written as a part of the February 2022 Daily Blogging Challenge. You can find my other posts related to the theme of Webhosting by clicking here.
Feature Image: Created by Amar Vyas
Wordcount: 830. Time taken for writing, editing, images and publishing: 1 hr 20 minutes.
This post was updated on 2022-03-05