How I Optimise Images

On this website, I carefully craft each cover image for every story. They are not AI-generated (and more likely, they will never be). Over the years (decades) I learned how to make them very qucikly, usually it takes me just a minute or two to design one. And I enjoy doing that.

Vector Images

#

When I can afford it, I create vector images. They’re designed to be scalable to any size, hence they’ll stay sharp and crisp on any display. Upon exploring my blog, you can see I have many vector images.

• If you reading this from your smartphone, try to zoom the header image of any story. If it stays crisp regardless of how much you zoom, it’s vector.

I prefer this format when possible.

I enjoy making vector covers for my posts. I have a huge collection of vector covers that I used for my personal to-do planner years ago.

• There was a time I designed a vector image for every single task! It was super-effective for me. But later, I gave up on the idea. It took too much time for trivial tasks, so I started using templatish icons for them, not unique ones. However, that long practice of doing those covers taught me many things vector. I’ve been doing that for years, before kids kicked into my life, and I have no energy for trivial insignificant tasks no more.

Upon creating vector image cover for my stories, I have these priorities:

• file size, I want my website to be as quick to load as possible;
  • hence, the icons must be of a small size, preferably less than 10 KB
• creation time, I cannot afford an hour of my time to make just one icon;
  • exceptions are possible, but those arise only if I’m up to the challenge of making something super-small and carefully craft each vector point.
• uniqueness, I want each post to have its unique icon, that’s preferably have some meaning (at least to me) behind
• minimalistic, I don’t want to have a visual mess all around me
• technical quality, I want my icons to be designed well from technical point of view, but it’s my lowest priority. That’s probably the first distinction from icons you can see in graphical user interfaces, where this must be one of the first priorities

Raster Images

#

When I cannot solve my task with vector icon, then I go with raster icon. That’s an image that has pixels, and cannot be zoomed indefinetely without losing quality. Things I cannot solve with vectors:

• photos, obviously
  • sometimes photo is just the best way to show something;
  • when I can — and most times I can — I use my own photos.
    • If the photo isn’t mine, I’m trying to not forget attributing the author.
• screenshots
• things that have blur, e.g. when I want to show some motion.
  • sometimes I want to use blur, and vector format is inefficient with that visual effect.

There’s nothing wrong with raster images, it’s just me liking vector images more. I use raster format, when needed. Those are usually jpeg and png, plus these days it’s webp, avif, and jpegxl (the newest format).

• More on that a bit further.

Software

#

To create the image, I use this software:

Linux

#

• For vector images I use Inkscape.
  • Then I optimise the image with svgo.
• For raster, I juggle Krita, Pinta, and sometimes Gimp (but I don’t like it).
  • Then I optimise the image with my own scripts that trigger optimisation software. (More on that further.)

I would highlight Pinta here. It’s quite good for when you need to do very basic tasks on your image (resize, crop, adjust etc.)

macOS

#

When I was on macOS (and Windows before that), I used Adobe Photoshop and Adobe Illustrator at first, for over a decade. It didn’t feel like they actually do something, and their price started to become just ridiculous.

When Pixelmator Pro was released, I switched to it. And it was the best experience I had. I highly recommend this tool. It’s million years ahead of Adobe’s stagnation. It feels like the future is here. Adobe mostly feels like they’re stuck in 90s.

• Bought it for [half the price, I believe it was $30 back then] many years ago, and couldn’t be any happier! Worth every penny. Unfortunately (for me now), it needs macOS, which I don’t always have, even despite most of my tech is from Apple. (I run Linux these days.)
• I just wish Adobe (and its Photoshop) to stop being industry standard, and Pixelmator Pro becoming one.
• Updated Nov 2024: Apple bought Pixelmator! Fingers crossed! 🤞

For vectors on macOS, I used Sketch, Figma (available basically everywhere you can get browser, FreeBSD, Linux, ChromeOS, even Windows) or Affinity Designer (also available on Windows). I will highy recommend Figma as a cross-platform tool. But others are decent software too.

Scripts

#

To enhance my images quickly and efficiently (read: automatically), I wrote a tiny shell script that converts each raster image in 5 formats:

• legacy jpeg, optimised with jpegoptim
• lossless png, optimised with pngquant
• webp, converted with the help of cwebp
• avif, with libavif
• jxl (jpeg-xl) with jpeg-xl

sudo pacman -Syu cwebp libavif jpeg-xl pngquant jpegoptim

The goal of all 5 formats to compare images visually, when needed.

webp and avif

#

While comparing Most times it’s webp and avif (the coolest kid in town).

• They’re not supported everywhere yet, but they’re would be, so why not be on the verge of the technology?
• Although, it’s clamed that jpeg-xl compets with avif, I haven’t noticed it being featured by the script yet.
  • As jpeg-xl is not supported by most browsers as of now, I won’t use it even if the script choses it for the image.
  • That’s why I keep the other formats, so I could pick 2nd best, when needed.
• As of my review of this story at the end of 2024,
  • the webp and avif formats are supported everywhere on the modern web now.
  • the jxl is still a minority. (Supported only on Apple devices, macOS and iOS/iPadOS, as of Sep 2024.)

As of Sep 28, 2024, their coverage is 96%, 93%, 13% for webp, avif, jxl respectively.

File Sizes

#

Sometimes the difference between the original jpg and the resulting avif is just staggering.

I converted my cover image for this website, from jpeg to avif. The visual difference isn’t noticeable, but take a look at the file sizes! The original jpg image is 436 kB, and the avif compression is just 28 kB, which is 15.5 times less!

It’s not that efficient with plain photos. And it’s not much better with plain colour images, sometimes png is very efficient.

But if these two are combined, it’s so much of a difference! Most times this combination you may find in screenshots. If the image is some photo and some plain colour parts, the difference between an avif and png may be up to 20 times.

This screenshot is literally 19 times (sic!) smaller with avif over png, it’s 27 kB vs 515 kB!

Sometimes the jxl also shines! The following example (the FullHD screnshot of the terminal window, mostly text) shows 42 kB vs 119 kB avif! Which is 3 times less to the 2nd best, and 7 times smaller than the original.

I put it on here, if you can see two images, including the screenshot of the terminal window above the file size comparison, congratulations! You have a modern browser.

• As of the Autumn of 2024, it’s Safari on either iOS or macOS.
• Or IE6 on Windows. Of course not, no, no IE6 no more.
• Even my Firefox 130 on Linux isn’t supported yet. Nor Chrome.

Single File

#

It creates a set of images (the compressed jpg or png have _compressed suffix), and renames the smallest image with the featured_ prefix.

Uploaded it with this command:

curl -F 'file=@-' 0x0.st < file

Directories

#

This script may be very useful when I want to compress a directory of images. To me, that’s my Screenshots folder. I do keep my screenshots for a long time, and I like to review them too.

So I made these improvements to process a directory of pictures:

• If an argument to the script is a single file, then the image is placed in the same directory;
  • if the smallest image is of the same extension (png or jpeg), the smallest one is renamed with _compressed suffix.
  • if the extension is different, the new file has the same name and placed alongside the original file.
• If an argument to the script is a directory, a _compressed suffix directory is created. Just in case, so to avoid some corruption of the original files.
  • It doesn’t go into sub-directories. I didn’t want to complicate the script. Although, I think that may be useful, and I may want to upgrade the script later on.
  • In the new directory, I leave only one version of the file, the smallest one.
• I keep the oldest timestamp of the original file (either modification or creation time) and apply it to the new file via touch command
  • I don’t want all of the screenshots to become dated as today. Even despite for me the filename is usually contains that metadata, Screenshot-2021-09-28-145132.png, sometimes keeping the original timestamp is just useful too. At least you can sort the image with the filesystem by modfication time.

I’ve applied the script to the directory of my screenshots. Part of which was compressed with the pngquant already, but the difference is still staggering, 164 MB vs 26 MB for 558 files.

• 377 of them are avif
• 11 of them are jxl
• 82 of them are compressed with pngquant png
• 86 of them are webp

Some comments:

• Before, I wasn’t sure whether I want to keep my screenshots. Now, I think I’ll remove just the junk, and keep some of those files for the history. I like exploring my very old screenshots.
• I have a directory with my small collection of wallpapers I like. It’s images from 4K to 8K, usually photos. Went from 43.3 to 17.6 MB.
  • My swaywm allows me to have any possible image as a background, including jxl.
• Now I want to compress my photos archive with this avif codec, as I’d review them on a modern machine anyway.
  • I use some defaults for the script, so probably I’d like to fine-tune it at some point later. There’s a chance that this competition of formats isn’t fair. But I’m satisfied with the result as of now.

The script can be applied to both a single file or a directory.

Also, I’m considering some extra solution: to watch the directory with the inotify script and change the resulting image. What keeps me from doing it is the need to share screenshot with somebody, and most mediums to not support sharing avif images as of now. So for me, this script works well for archiving purposes. I use png screenshots for sharing, but for archival purposes, I keep them as avifs or webps.

Conclusion

#

Improving images is something almost nobody will ever notice, but that’s how I do my work, I just cannot ignore this underlying factor and I want my projects to be well-made, not just look that way.

• This website is also optimised to load 🤏 very quickly! 🤘

Creating these images makes the overall look of my website quite nice, I like when each story gets its unique image. As they load very fast, it’s not an expensive overhead traffic-wise. Neither for me, who designs them quite quickly. I’m very efficient with the software, after all.

I think this approach possible only when you understand both the design discipline and the programming too. If I would be just a programmer, I may never think of it. If I would just a designer, I may never think of this possibility too. Perhaps, I would just try to find some software for that. (And may never find it.)

Enjoy your experience here! 😉