Nowadays with the device (mobile, tablet, desktop etc.) and connectivity diversity (3G, 4G etc.) that we know, serving an optimized information to specific environments is paramount (though not that easy).
Many techniques exist to answer performance issues, especially when it comes to images. Indeed images are often the biggest resource of a Web page and therefore can be the limiting factor in obtaining an acceptable page loading time.
How to optimize the images loading?
Image loading can be optimized in many ways but the“lazy loading” and “multiserving images” techniques are among the most popular.
Lazy loading Loads only what’s necessary
Lazy loading allows your Web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably.
This concept is far from being new but we still see a lot of Websites not using it. For instance this page lists a tremending amount of images: The loading time is greater than 30 seconds and the page size is greater than 19Mb…
Knowing that just one second delay in page-load can cause up to 7% loss in customer conversions and decrease customer satisfaction by 16%, you understand how important performance can be for your audience.
Interesting Lazy loading plugins
Multiserving Images serves different image versions to different devices
The concept of Responsive design has recently spread widely with the emergence of CSS Frameworks such as Bootstrap or Foundation. Adapting your Web page content to any type of screen as become vital. For images the problem is not that easy as there is no HTML markup that allows you to load a different version of an image on different device. We still rely on the src attribute that is unique.
To resolve this very problem, some hacks exist. You can for example use CSS media queries to load a different version of an image using background-image property on a simple div or span.
@media (min-width: 601px) { #yourImage { background-image:url('large.png') } } @media (max-width: 600px) { #yourImage { background-image:url('small.png') } } You can also use some plugins that allow you to specify several src attributes (one for any type of device you want):
<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,<768:small.jpg, <960:medium.jpg, >960:big.jpg' /&gt;Interesting Multiserving Images plugins
BttrLazyLoading Responsive Lazy Loading plugin for JQuery
There are many open source projects that tackle both problematic (Lazy loading and Responsivity) but few at the same time. BttrLazyLoading does!
BttrLazyLoading is a Jquery plugin that allows your Web application to only load images within the viewport. It also allows you having different versions of an image for four different screen sizes.
Lazy loading
BttrLazyLoading allows your Web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably.
Responsive
BttrLazyLoading makes sure that you always have the appropriate image loaded for any type of screen: phones (<768px), tablets (?768px), desktops (?992px) and large Desktops (?1200px).
Retina ready
BttrLazyLoading uses a naming convention @2x to display Retina images when the option is enabled.
Customizable
With more than 10 options (such as animations or background color) and 4 events, BttrLazyLoading is fully customizable to adapt to most needs.