How do y’all treat image sizing when working with Blocs?
Do you simplify by deciding on a ‘personal max’ when pre-formatting images… like 1920w and use that as the site-wide max, or do you look at each image’s final usecase and optimise for the size that Blocs reports for the element, potentially by adding @2x and @3x versions?
Does Blocs support putting a large number of sizes for the same image so that the most optimal version gets served, considering its ‘rendered size’ i.e. ‘srcset’? I know Blocs offers automatic .webp conversion, which I use.
How much prep work is manual labor and what good tools are out there? Both when it comes to converting, as well as analysing the final web page.
Apps like Pixelmator Pro have options to export images in all these variants at once. Very handy.
I guess everyone develops their own workflow depending on their work load, some might not have any workflow as they just maintain personal websites.
I use Pixelator a lot and I have several Shortcuts setup for image optimisation and thumbnail creation that I can process in bulk. I can set the max width and or height to preserve the image ratio. I have it setup in finder as quick actions. Saves me a ton of time.
But generally to me, the @2x feels like a bit of an older concept to me that emerged just as we were getting HiDPI (“retina”) displays. Not sure if that feeling is correct, or what code Blocs generates—I haven’t checked it out.
On the other hand, the concept of a ‘source set’ (srcset), is current and defines several different image files at various resolutions (and therefore “weights”) that can all refer to the same image. This means you can have a larger image load for the desktop breakpoint and a much smaller, and lighter, image load for the mobile breakpoint, instead of just scaling the large image down, which would still load an unnecessary amount of data.
Srcset can be used in a few different ways, but this is the use-case I’m thinking of.
But as PeteSharp says: he uses Pixelmator to automate it, and I have the same functionality in Figma. If I select a frame and export it, it’s very simple to render two extra files with the correct naming @2x and @3x added to the filename. Then you don’t even have to use the image wells in Blocs. Blocs will automagically recognize the larger files with the same name and serve them as needed.
Correct, you only need to add the one image to the well and If your naming is correctly applied, Blocs will see it and create the markup. That’s a more recent feature, you used to have to add each one manually.
After you export them, in whatever software (MAC or Windows) you still have to upload them and store them. Blocs simply chosen which one will be delivered.
Adding the x2 and x3 image each time would take forever if there are a lot of images. One point I would add is that most web browsers these days are able to show WebP images, so if you want to let Blocs convert them avoid optimising the original Jpeg too much, otherwise you’ll effectively be optimising twice and that will likely to lead to poor quality for most visitors.
Hi @Flashman, don’t you have any problems with WebP?
Every single time I’ve tried to use it my sites end up with pictures not showing or wrong sizes, so the first thing I do now is disable it.
There was definitely a problem previously, and I have a couple sites online where I had to do everything with htaccess and WebP files hosted remotely to make it work. More recently it’s all been OK though.
