Image size

What is the preferred K size of images that are full width in the browser?
What is the maximum?

Thanks.

I think ~150 kB is often quoted.

If itā€™s a jpg mozjpeg seems to work quite well to balance size/quality.

If itā€™s a png look at WebP with a png fallback to help with load speeds.

I had never heard of mozjpeg before. Thank you.

As for a png, how would you save it as a WEbP, and how/where to create it with a png fallback?

For WebP Iā€™ve used squoosh.app but there are many other image converters that can do it.

Do beware that macOS only supports WebP on fairly recent versions. I have High Sierra and it is not supported, so you wonā€™t see a preview image.

Youā€™ll need a stack that supports WebP usage and fallback.
There is a free one from Stacks4stacks

Shakingthehabitualā€™s srcerer stack set includes a WebP stack

Foundation 6 also can support WebP usage and fall back, see this video

1 Like

Lots of information.

THANK YOU SO MUCH.

If you havenā€˜t seen Squash 3, Iā€™d strongly recommend taking a look. Itā€™s achieving some pretty impressive compression on JPEGs and PNGs without any apparent loss of quality, and also exports to WebP and AVIV (with similar small sizes). It has a host of other features which make it a big improvement on web based utilities, too, like live preview, presets and file resizing. Itā€™s a really stunning piece of work by Realmac.

Hot tip. Thanks.

There really is no standard, and the kb size will be dependant on the image itself, plus the application.

I would aim for most full width header images, assuming something like a 16:9 ratio of about 1800px wide and maxing at 300kb. But, right now Iā€™m building a wedding dress site for a client who wants super sharp header images of the dresses, so some are coming in at over 500kb. Not ideal IMO, but I get where the client is coming from.

What you need to understand though is that the more detail and the sharper the image, the bigger the kb. For every pin-sharp edge in a pic add a kb to the total weight. So, an image with a sharp small central focal point but a blurred background might be 150kb, yet the same composition with the background in focus might be 500kb with lesser overall quality.

Header images are not only all about finding the balance between pixel dimensions and kilobytes, but also aspect ratio and composition.

1 Like

What you are saying makes absolute sense. The question, though, relates to retina images. Would you double the size of that 16:9, 1800 px wide, 300 Kb image, or are the dimensions as they are good enough?

Thanks.

Considering most images are reduced in size by the browser, Iā€™ve never felt the need to go down the retina image route. For me they add complication to the build and a big bucket of download speed.

In reality, most people will use a browser window of around 1400px wide, so even the 1800px wide headers are getting squished down.

I never bother with retina images, but I am very careful to reduce the width and sometimes the aspect ratio so that the image will always show up to itā€™s max size. So if I have an image that will never display larger than 450px, I create a 450px wide version.

Image optimisation is like snake oil in that it is easy to increase the image optinisation and degradation to make a product to seem better than a competing product.

For a free product, ImagePro is very hard to justify paying for a product that does the same.

I use jpegMini for all my basic and batch jpg optimisation and resizing, but it has now increased in price to $59 to reflect itā€™s professional use, instead of the many mickeymouse optimisers out there. It doesnā€™t do sounds and naff filters though.

Also note that every time you save a png or jpg file, that you will degrade itā€™s quality. Open and save a jpg or png image 10 times and see what you get. So Apps that resize and optimes with 1 save are better.

Wondering how all these various image resizing apps and websites compare to the Save for Web function in Photoshop.

It will depend on the settings you select in Photoshop.

Pretty much all these apps will produce an end result with more or less the quality for a given setting.

I donā€™t sue PS nowadays, but Affinity Photo exporting at 70% normally gives me a good enough quality to size ratio. Sometimes I will then run the result thru Imageoptim which will shave off another percent or two, but rarely more.

Of all these image optimisation apps they will all claim to do things better than the rest, but the reality is they are all almost identical to each other, in terms of file size at a given quality level.

I suppose I should mention the new kid on the block around these parts, Squash3, from Realmac, the makers of Rapidweaver. Itā€™s another ā€œme-toā€ image optimisation app but with a lot of added features to the new version 3. And thatā€™s what you will be paying for, additional features not better image optimisation.

For what itā€™s worth, S3 does look interesting with some nice features, that itā€™s claimed are super fast and easy to setup. So if that pans out Iā€™ll be buying it to replace ImageOptim.

Fireworks, of beloved memory, used to have a fantastic feature which allowed you to have one area of an image at higher resolution than the rest. Which is actually really useful on big hero images, because mostly there will be a focal point where sharpness is important, but sharp focus not so important in the rest.

I wondered if I could recreate this effect. And, actually (with the help of a layers stack ā€” I used one of Defligraā€™s) it wasnā€™t at all difficult. All you need to do is save two versions of your image ā€” the first with the lossiest compression you can get away with, the second at full retina quality. Select the area on your second image that you want to be the focal point and delete everything else to transparency. Then layer the retina image over the lossy one.

Squash 3 compressed the background image to a 61kb WebP (squeezed to 10% lossy compression) and the foreground image to a 731kb lossless WebP. (Actually Squash did such a good job of compressing the background image without artefacts that itā€™s pretty good just by itself, but you can see the difference when you zoom in ā€” for instance, between her face and her hair). The original image was 34.4MB.

My test is here: https://bit.ly/3xfXfiw

1 Like

The image optimising algorithms will do a better job than baked-in standard JPG export at whatever%. If youā€™re going to use one (e.g. ImageOptim, JPEGmini, Squash), then DONā€™T do a 70% or whatever first out of Photoshop e.gā€¦ send it out at 100% and go from there.

Start with the free ImageOptim. It gets ridiculous results and most of the time you wonā€™t tell the difference. Except for luminance compression, in which case you may be better off going for the larger files JPEGmini outputs. Squash was the same as JPEGmini, but I havenā€™t tried Squash3.

Generally itā€™s best to keep images no larger than 200Kb, but it depends on how many are on the page, and where in the world you are.

2 Likes

ā€¦ so many fantastic features. Adobe never understood it, crippled it, stole what they thought were itā€™s best features, and then killed it.

1 Like

What a treasure trove of information. Thank you.

1 Like

For photo-types here, direct export from the original RAW file will always give far better results than exporting to TIFF or similar and then re-sizing.

I spent a great deal time a few months back testing various products. Adobe product (Camera RAW) exports from RAW at 40-50% quality look great, even on full screen and generally match or exceed ImageOptim for quality and size. There are options to match specific file sizes although I typically now use the quality setting rather than aiming for a specific size.