I’m often reading that a total of > 3 MB of images is way too much for a site to run smoothly.
My current testing project looks awesome in the preview but is undeniably jerky when watched online in a browser. Admittedly, it has two parallax effects and one animation but I suppose if I shrinked the images with JPEGMini the overall experience would be much better?
So my question is: what is your roundabout recommendation for the max. “image weight” in MB?
And what other tricks do I have to consider to create the smoothest watching experience?
It will also depend to an extent on factors such as the processor of your smartphone, web connection, website server and other elements. There are many factors involved but personally I like to keep page under 1mb at most.
Good points. I realize we can’t talk about a total without also considering the average size of each image. My project’s pictures currently are between 250 - 590 kb so I assume I still have to do some more shrinking…
Depending on the source of your images, you might be using over-size images and can reduce load times by creating smaller resolution versions for the web site. This would be the first thing you do. I say separate versions because you probably don’t want to downscale (and lose) your master images lest you change them later.
When you look at an image in place in Blocs, it tells you the resolution (in the sidebar and next to the image) as nnn x mmm pixels. This is the size you need, assuming that the user views the website in similar conditions to you. If your image is larger than this then you can usefully produce a website version. If you want to allow for high resolution (retina) displays, the images need to be at 144dpi, otherwise use the standard of 72dpi; feed these numbers into your image processing software and export a version for the website.
This exported image is the one to be compressed. JPEG is generally the best format and you can use the compression setting in your image processing app’s export facility to control it and/or the tricks that @ViaWebDesign suggested.
Personally, an option in Blocs to automatically downscale an oversized image when it is imported is on my wish list for @Norm; it would not be universally applicable but would save time with images that are just eye-candy and whose quality is not a site design decision.
Retina displays (high res) are more than single pixel density. They work with pixels not dots. Anything above 72dpi for the web is a waste.
If you have a Retina display take a look at this page. Look at the three pictures at 72, 144 and 300dpi. You can see there’s no difference (other than huge file sizes).