A fully automated approach depends on your operating system, but for Linux and macOS (or Windows with WSL2) - you can write a script to iterate through a directory and use something like imagemagick to convert them to different formats, and set quality settings too.
So for example, in a directory of jpgs and convert them to webp, and compress them to 50% quality:
#!/usr/bin/env bash
# Make sure you have image magick installed - it is available on Linux and macOS through brew.sh
# or your package manager
ext=".jpg" # change this to the extension for the images you want to convert/compress
format=".webp" # change this if you want to change the format of the result image
quality=50 # change this to lower for higher compression, higher for less compression
# shouldn't need to change anything below
extLength=${#ext}
for file in ./*$ext; do
fileWithoutExt=${file:0:-$extLength}
echo "Compressing $file"
magick $file -quality $quality $fileWithoutExt$format
done
Sometimes lower compression results in higher file sizes - to experiment more easily for what works best for those images, use the below tool.
If you ever find a need to compress one image instead of a directory, a useful tool is called Squoosh - made by Google for the purpose of optimizing images. The images are compressed locally on-device - they do not go to a server to be compressed, if you are concerned about privacy or potential for images to be used for training data.
The website is
hereIf smaller file sizes don't help - try re-locating your images closer to you physically - this could be done using a CDN like bunny.net, or just simply using a server physically closer to where you expect most of your traffic to come from.
If you really want to go crazy with it, make multiple sizes of the same image and serve those depending on the client - you can do that using the img HTML tag and the srcset property - and let the browser fetch which one is best for it:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizesEdit:
While looking at your current website, some of the images are crazy large (over 1MB in size) - and aren't rendering visibly in the browser at those resolutions. This results in wasted bandwidth and time. I would highly recommend sizing the images physically to how they are visibly viewed in the browser. If an image is 400x400 but is rendered at 200x200 - scale the image to 200x200 instead of keeping it at 400x400 - that alone will net huge savings in size.
You can check what an image is being rendered at by right-clicking it and clicking "Inspect Element" in your browser, and looking at the overlay showing you the physical size of it in the viewport verses the resolution - that will give you a pretty exact idea as to how to size your images. Sometimes relying on the height and width properties isn't enough, cause ultimately those change the aspect ratio, too - not just the size.
Now, another trick to reduce what web developers call "jank" is to set the size properties ahead of time - this tells the browser to make space for those elements ahead of time, even as the image downloads. This will help a lot in preventing things from shifting around, and when you eventually optimize your images - makes the feeling of the site loading a lot faster even if it isn't.
Another trick is to lazy load images - this trick works best when used very sparingly. So, the idea is an image may not be needed immediately - cause it isn't visible immediately when the page loads. You have to scroll to see this image, or maybe you have to click something to show it. Lazy loading can help here - it lets the browser know which images don't need to be loaded immediately and can wait to be loaded later when more appropriate.
Adding the attribute loading and setting it to lazy to the img tag helps specifically with this.
Example:
<img src="/some-awesome.jpg" loading="lazy" />
Now, what about the opposite - logos and things like that need to load immediately, right? Critical images in the content - such as maybe an image displaying the result of a recipe or something, most likely need to take priority over the other images on the page.
Just like with lazy loading, there's also one for priority images - you just have to change "lazy" to "eager" for those images.
With these tricks in tandem with compression will make your website significantly faster - as a lot of your images are over 100kb in size. It's literally free performance that you can get right now - no need to pay for a CDN or anything crazy like that.
Hopefully this helps!
Posts & Arts: 77/1k.beats
Author
