Web page performance: How to optimize image loading?

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.

Demo

To fully appreciate the responsivity of the following images, try to resize your browser or use a different device.

Sources

Top 5 useless but funny JavaScript plugins

Internet is full of useless and/or funny plugins that made my day several times in the past. Whatever dumb things you can think of, you can be sure that someone already made a plugin for it! Here is my top 5 useless but funny JavaScript plugins:

1. Adult Cat Finder

adult_cat

With Adult Cat Finder, you’re never more than one click away from chatting with a hot, local cat in your area!

Without any doubt my favorite plugin of all (even though it is not a proper JavaScript plugin as it uses an iframe to include the chat), Adult Cat Finder inserts a Facebook alike chat in your Web page to discuss with a cute cat.


2. Fartscroll.js

fartscroll

Everyone farts. And now your web pages can too.

Fartscroll is a JavaScript plugin created by theonion.com the satirical Website. It created an incredible buzz at the time of the release in early 2013. Fartscroll simply “release” fart sounds when you scroll Web pages… a classic!


3. Raptorize

raptor

An awesome jQuery plugin that unleahes a Raptor of Jurassic proportions.

Raptorize is a jQuery plugin created by Zurb a company most known for the Foundation project (CSS Framework). It inserts a moving raptor on Web pages. Even though the purpose of this plugin is still unknown for me I appreciate the technical realization (Trigger on Konami code, raptor yell etc.). Good job!


4. Fuckitjs

fuckit

FuckItJS uses state-of-the-art technology to make sure your JavaScript code runs whether your compiler likes it or not.

Probably the less useful plugin of all Fuckitjs has the ability to prevent releasing JavaScript errors. Through a process known as Eval-Rinse-Reload-And-Repeat, FuckItJS repeatedly compiles your code, detecting errors and slicing those lines out of the script. The compilation result could be useless but is 100% bug free!


5. Fool.js

mister-t

jQuery plugin that lets you play one or more fun practical jokes on an unsuspecting visitor, and it’s crazy easy to set up.

Fool.js is a collection of April Fools’ day. With Fool.js you can rickroll your visitors, bomb them with annoying JavaScript alerts/confirm boxes and even crash your visitors’ browser! Use with caution!


What’s your Top 5?

Share your “Top 5 useless but funny JavaScript plugins” with me by commenting.