Image optimisation, format and Volt CMS

Are you allowed to down size a multiple images to an exact size?

I’m away for a bit now so I won’t be able to fiddle around for a while…
This thread has opened up a few good options though, thanks.
I’m looking at combining a decent image compression tool and buying Volt CMS to make my site photo gallery uploads a bit more 2022.
My current gallery pages are made on a now defunct app; Juicebox Pro.

A question still remains open; which format though?

1 Like

Volt will resize and optimise gallery images in line with the core settings.

2 Likes

This is the first I’ve heard of this. I would love to see some written doc or better yet video showing this.

Yes correct. There are several resizing options that cover all resizing needs. You may have had the Maintain aspect ratio selected and the image you were trying to resize has a different ratio to the one to were trying to resize to.

I initially missed the bulk processing that I used to enjoy in ImageOptim and jpegMini.

What I found was that I changed my workflow to fit around Squoosh, to a new workflow where I would finalise my image selections first, and then Squoosh them to jpg or png and webP in the best size. This amount of time is about the same as setting up an image with Alt text, dimensions, etc., so is time well spent.

However, this stage is probably the most important part of building any website that uses images. The potential download speed increase can be significant and way better that using the simpler batch optimisers.

Also when you use Squoosh you compare the size differences between the main 3 image types and then by experience, choose the best format, for each image. I have learnt that jpg is not always better for non transparent images, and there comes a point with the amount of transparency that can make a webP image larger than the png version.

The best way to see the gains you can make, is to resize, save and optimise a typical jpg and png versions of the same test image. Then do the same resize and optimise inside Squoosh with an additional webP image export, using the Squoosh slider to adjust above the point where you see the image degrade.

In Volt Core bric, you have a setting if images during upload should automatically be constrained in size (width or height).

Volt does a pretty good job of optimising and resizing full size images. It’s best to avoid optimising them before uploading or the quality may suffer, because you are effectively saving the file twice at that point. This would apply to any editing app as well, since Jpeg loses quality every time it is saved.

For example, let’s say we want our gallery images to be 1200px wide and saved for web. We can set that in the core settings and upload 20mb jpg files through the browser that Volt will neatly handle, so they come down to 300kb or similar, depending on the image.

Something I would like to see is an option to handle different sized images inside the project, so if I had another area on the site with say 3 columns. Ideally I might want to make sure they were no bigger 600px each and optimised for that size, rather than limited to the larger 1200px size that was set in the core bric.

At present I tend to optimise those images separately and upload them, so they fall under the limit and pass through untouched, but this is not something that clients could easily do.

1 Like

I might in future create srcset images in 2 different sizes, which then are able to be loaded by the browser depending on screen size. I took a note :+1:

3 Likes

That would also be useful; very useful, since we can obviously use small images on mobile. I was mainly referring to simply having smaller images in different parts of the site and not wishing to be constrained by a single upload size.

1 Like

Volt doesn’t know where you would like to insert the image. Also, images can be reused later for other parts of the site without need for additional upload. So, I understand what you’re wishing for, but that’s actually not feasible.

But, we’re getting away from the original topic :smile:

Yes, but I think a lot of users are using Volt by default and one the main reasons is the image galleries with options not found otherwise in Blocs.

I am wondering if it would be possible inside Volt to have more than one option inside the core settings for image sizes. For example you could have that first one for 1200px, then a second for 800px, then 600px and 400px. Upload as normal with the full size jpeg, then have the server resize and place them in different sub folders.

2 Likes

Exactly. Therefore: different source sets, and also in addition image thumbnails for the gallery grids.

A lot of new features will be included in the future :+1:

1 Like

I am hearing that Superman theme music again :slightly_smiling_face:

1 Like

You can batch process and export in Affinity Photo. It’s not quite there with Photoshop but moving in the right direction.

1 Like

Hi.
Yes we are a bit, but I’m finding everyone’s comments informative.
It will save me going down one route only to find I should have been learning a different method.

I’m leaning towards purchasing and learning Volts through lessons by @Jannis and @Eldar, reading and picking out notes and tips from this threads’ comments, and then optimising images through an on line site. This would be so I could optimise images on the go if required (and if non-distructive), and then log in and upload to a gallery or add to a ‘blog’ type feed occasionally with Volts.
Let’s keep the chatter and related drifting going guys, there’s a few people like me that need advice.
Lastly, is there anything a more widely used and future proof format I should be looking at than .jpeg?
:pray:

1 Like

@Flashman Can Image Tool+ also handle transparent PNG’s? Otherwise the software looks very promising.

It looks like it. I took a file in Affinity Publisher with transparency and exported it as a PNG. I then passed that file through Image Tool+ and transparency was maintained, so it looks like it will maintain transparency, assuming it was in the original file.

The original file is 13.5mb and I’ve tried converting at a smaller size of maximum width at 700px, both with and without the compress option enabled. Remember that just uploading them here further degrades the quality, because the forum software compresses uploads.

The compressed size is 25kb:

Without setting compression in the app it is 66kb. In both instances transparency is maintained and shows that way when opened in Affinity.

NB By the time the forum has zapped them with further compression both suffer in quality.

3 Likes

It’s kind of clunky, but another option you could check out is:

This looks extremely versatile but almost excessive for what most of us need to do. It’s free though and probably useful for handling strange formats.

The two formats you should be thinking about for future usage are WebP and AVIF. The big limitation here is Safari, because Apple controls format compatibility through the OS, rather than the browser and they have been very slow to adapt. If we jumped in a time machine now and examined this in 2025 I would probably say you can forget Jpeg.

Right now it’s tricky if you want to support visitors on older Mac OS versions. At the moment we could use an image bric that serves up WebP or AVIF where possible or falls back to Jpeg where necessary. That would be useful.

@Flashman Thanks for the info, I’ve always used ImageAlpha for transparent Png’s, but since macOs 12.3.1 it doesn’t work anymore, so Image Tool+ seems like a good replacement to me.

1 Like