
Clicking on an image will
open a "viewport" where
you can see it original size
or shrunk to fit.
You will also be able
to see where on
the page images have
been 'expanded' doesn't
always make for a clearer
image !
NB: mem size shown for animations can easily be doubled ! - it all depends on the differences between each 'frame' on the day.
Still with me ?
Very large physical size
A little 'un
Finally ...
Bloody HUGE graphic !
Pictures ...
.... In the days of steam radio, when modems were connected by a wet piece of string and ISPs charged for data in and out. It was considered bad design to have a web page and it's content greater than 120kB !!If nothing else you could play a game of cards whilst it was downloading.
Now - People have forgotten all that because of high speeds, but their image memory sizes have become HUGE. No one seems to know how to resize or optimise for 'the web' anymore - not good.
So here is a page with lots of images, some look big but aren't in terms of memory size, some are heavy on memory because they are lengthy animations, and some are just BIG (18.5MB).
Give the visitor something to read (like you are doing now) in order to allow time for the first few images to load
If possible put the largest memory ones at the end of your lengthy list
To display on your page 'neatly' you just change the width / height attribute of the image, your layout will depend both on the 'quality' of a resized image and the normal width of your site (you may have two images side-by-side)
This page uses javascript to give an (upto full screen) image "viewport" with Photoswipe, which is controlled by an easypeasy 'wrapper' (jqPhotoSwipe [I discovered too late that it has ALL the files you need]).
If you would like the "scroll up" button

original 690px x 450px 19.1kB © komokaweather / Blake-Larsen
Red bar = sunshine | Grey bar = no sunshine | Thin bar = no recording or future time
Vertical axis = sun position altitude; Horizontal axis = time of day from sunrise to sunset