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.

Create a “load more” widget using PHP, Ajax, and jQuery

Several months ago I created a post that was quite popular: Create a “load more” widget using PHP, Ajax, Mootools, Bootstrap and Mustache.js. Today I decided to port the code from Mootools to jQuery.

Prerequisite

This tutorial requires several prerequisite in order to be completed successfully:

  • The server needs to run PHP5 to be able to use JSON functions.
  • The widget does not need any custom CSS we will only use the famous Bootstrap Framework.
  • We will use the lastest version of jQuery (1.10.1)

For the logic please refer to Create a “load more” widget using PHP, Ajax, Mootools, Bootstrap and Mustache.js, and to see the code refer to the demo

ShprinkOne WordPress theme released

I am pleased to announce the release of my first WordPress Theme: ShprinkOne is a Customizable and Responsive (mobile friendly) theme that can fit any screen (Mobile phone, tablet, laptop, desktop).

Nowadays every Internet company is focusing on mobile, it has been a trend for a long time (“mobile first” was something I heard a lot at eBay) and might continue for a little while. Releasing a theme that would not be mobile friendly was then out of the question.

As an early adopter and big fan of the front-end framework Bootstrap I decided to use its ability to create Responsive markup structure and to provide a set of great UI (Navbar, Buttons etc.), tools (Slideshow, Affix, TypeHead etc.) for this project.

Besides the obvious technical advantages that Bootstrap provides, another aspect made the choice even easier: the Community! You would be amazed by the number of start ups that based their product on Bootstrap! For example some of the ShprinkOne pages were created using jetstrap.com (great mockup tool for Bootstrap) and if you like to often change your theme ShprinkOne allows you to select some of the best Bootstrap themes (from bootswatch.com, divshot.com) that exist directly from the admin page.

For this theme I also wanted to try out Masonry and the Infinite Scroll plugins for jQuery that appeared to be really easy to use. Masonry helps to re-organize the page content and creates a Pinterest like dashboard while Infinite Scroll plugin loads more blog post when you scroll down the page. The WordPress loop page (that is shared by most of the pages: Home, Category, Tag, Author and more..) uses both of them to create a great user experience(No need to switch from page to page, everything is displayed in a single page).

ShprinkOne is Open Source and needs your help to make it even better. If you are interest to help you can fork the project on GitHub.


Screenshots


Features

  • Home page Slideshow
  • Theme customization (Select your style among 10+ free themes)
  • Layout customization (Sidebar-Content, Content-Sidebar or Content)
  • Posts as pins using Masonry
  • Language ready: So far English and French

Get the full list