Image Optimization

the usual suspect when your website is slow
A few years ago, I created a website for a hiking group in China. My tool of choice back then was Site Origin. Yes, you are right. What was I thinking? Anyway, every other week the webmaster would upload a new post with many images.

Are free image optimization plugins efficient?

I had installed one of the image optimizations plugins, I think it was Ewww Optimizer. Of course, it was the free version, because nobody wants to pay for premium plugins on a non-commercial site.

The problem with these image optimization plugins is that they compress the images by a certain predefined percentage. However, the images that are being uploaded can vary a lot in size and require different levels of compression or resizing.

The webmaster hadn't paid any attention to image size. When she finally complained about slow loading speed - also in the backend - I noticed that she had uploaded quite a few images of 15MB and more. With more than 3,000 locally stored images the total website already weighed close to 20GB.

That wasn’t only slowing down the website but also taking up a huge amount of web space on my server. Things had to change.

Oxygenbuilder to the rescue

I had just started playing around with Oxygen Builder and so I decided to build a pro bono Oxygen website from scratch for the hikers. I usually develop on a live subdomain rather than staging it. It’s faster and looks 100% realistic in the frontend.
The first problem I ran into was that the webmaster hadn’t kept the original images. Not on her PC, not on the phone, and not in the cloud. Using the native WordPress tools was not really an option. A lot of files get damaged or even lost during the ex- and importing process. Furthermore, WP stores images in monthly folders, while I needed them to be related to specific posts. Last but not least, most plugins would also not have helped me with the compression and resizing of the big image files but just migrated them to the new WordPress installation. I wanted these images to be on my hard drive so that I could work on them.

Hoverify - a universal web dev tool

Fortunately, there is Hoverify, my allround tool. With one click it lets me save all images on a particular webpage. That means I could open a gallery page, skim off all images, and save them in a designated folder. The file size of the image would still be the same but now I could easily work on them.

What’s the best way to compress images?

There are a lot of websites where you can compress and resize images. I find that https://compressimage.toolur.com/ and https://resizeimage.net/ are the best for the job. You can upload up to 25 images at one time. The default is 70% compression rate but I go down to 10% to 30% at times. However, this can really reduce the quality of the image, and you have to see how much loss you can accept. I deleted a lot of images that were just too big in the first place. However, if you cannot just delete an important image, and if that is a really big one, send it through Facebook. Post it there and then save it (right click save image). Facebook knows how to scale down images without losing quality. I myself use wechat messenger. I send a big image back and forth between my mobile phone and my PC and the image size can shrink from e.g. 12MB to 500KB without losing much quality. Then upload this image to https://compressimage.toolur.com/ for compression. The whole process is quite time-consuming and therefore I only do that with images that are really worth the effort.

What’s the webp-format? Is it any good?

Nowadays, that most browsers can detect and display the webp format, I also convert images to that format with https://anyconv.com/jpg-to-webp-converter/. Although the file size is not always smaller than the original jpg file size I use them exclusively. Google prefers it because they came up with it. Most images are smaller and I think the website loads a tiny fraction faster. And that is what Google likes, too.

Titles and alt-texts for better SEO

On websites that need SEO I would add optimized titles and alt-texts to the images. Titles before uploading the images, alt texts once they are in the WordPress media library. But in this case SEO was not needed.

Cumulative layout shift

Another important thing is to control the sizes of the image. In this case it was easy because the gallery in Oxygen is taking care of it. But if Oxygen doesn’t it is important to define them, otherwise it may lead to a layout shift which is something that users as well as Google despise.
Back to my Oxygen install. What did I learn? Well, mainly that it is a pain in the neck to migrate huge websites. Therefore, the next time I do that I would upload one image per gallery first, then migrate the website, and then upload the major bulk of the images to the final website location.
Kampot Web Solutions
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram