Picture Gallery Page

This page uses "lazy loading" to display the larger images

This page has some demo images at the top, that show the difference between image formats when text is placed into an image. Compare the first image (just a standard PNG format) file size, with the 4th image. That one has been run through "TinyPNG". What this shows is that when using very basic colors such as black and white on an image, a compressed PNG not only looks as good or better than a jpg, the file size is much smaller.

Below those are large size pictures, placed onto the page using "lazy loading". What that means is the images never actually load until you scroll down and are ready to view them. Instead, a small file placeholder image is used... you will have to scroll down quickly if you want to be able to see that! This allows a page to load much quicker than if they had just been placed with a standard HTML image tag.

The PNG image below is 68kb - natural size is 600px by 400px

The JPG image below is 13kb - natural size is 300px by 200px

The PNG image below is 17kb natural size is 300px by 200px

The PNG image below is under 7kb - natural size is 600px by 400px

The JPG image below is 18kb - natural size is 600px by 400px

Six Large Images That Use "Lazy Loading"

This is the first lazy loaded picture. This is the second lazy loaded picture. This is the third lazy loaded picture. This is the fourth lazy loaded picture. This is the fifth lazy loaded picture. This is the sixth lazy loaded picture.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

A Headline

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.