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.


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.


With more than 10 options (such as animations or background color) and 4 events, BttrLazyLoading is fully customizable to adapt to most needs.


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


What’s new in Twitter Bootstrap 3?

We have been waiting for it for a long time, it is now a reality: Bootstrap 3 (BS3) RC1 was released July 27th.

August 13th: Bootstrap 3 RC2 released.
August 19th: Bootstrap 3 released.

BS3 is “mobile first” (which was also if I recall correctly the Foundation 4 motto at the time of the release: March 2013… What can be more trending than this?!). While Bootstrap 2 (BS2), has optional mobile friendly styles, Bootstrap 3, is mobile friendly from the start (More explanation in the Scaffolding section).

Apart from the design that is more or less trivial to talk about (It is different, and largely inspired from the FLAT trend: FlatUI), I would say that BS3 is better (New components and improved old ones) and cleaner (The markup semantic has been reviewed and improved : deletion of .button-inverse or .label-inverse for example.) than BS2.

if you want to learn more about BS2 instead you can read two of my previous post: Introduction to Twitter’s Bootstrap PPT and 3 awesome CSS Frameworks

In this post I will go through the most important changes that BS3 introduces divided in three sections : Scaffolding, CSS and Components

With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed. We’ve added features, removed features, and cleaned up a lot more. The v3 pull request on GitHub has all the details you’ll need for a complete list of changes and some helpful migration tips.

@mdo and @fat

Note that the project moved away from Twitter’s organization, and is now under it’s own twbt as announced in December.


Bootstrap is built on responsive 12-column grids.

A lot of things happened in the “old” scaffolding section with BS3. As it is “mobile first” instead of adding on optional mobile styles (like it used to in BS2), they’re baked right into the core.

Grid System


The grid system has changed a lot. With BS2 you could create a basic grid system that starts out stacked on mobile before becoming horizontal on desktop and tablet devices. With BS3 you have more freedom on how you want your grid to act on diverse screens.

New CSS classes appeared to help us: col-lg-* for large screens (Desktop),col-md-* for normal screens (Desktop), col-sm-* for small screens (Tablet) and col-xs-* for Mobile screens.

Note: The grid is fluid by default now, therefore .container-fluid and .row-fluid were removed.

  • BS2 BS3
    .span* .col-xs*

    Class changes between BS2 and BS3

Example 1: Grid stacked on Mobile and Tablet but horizontal on Desktop(normal and large)

	<div class="row">
		<div class="col-md-6 col-lg-6">6</div>
		<div class="col-md-6 col-lg-6">6</div>

Example 2: Grid stacked on Tablet but horizontal on Mobile and Desktop(normal and large)

	<div class="row">
		<div class="col-xs-6 col-md-6 col-lg-6">6</div>
		<div class="col-xs-6 col-md-6 col-lg-6">6</div>

Example 3: Grid horizontal on Mobile, Tablet and Desktop

	<div class="row">
		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div>
		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div>

Responsive design


Responsive images

Images in BS2 were automatically made responsive-friendly (if using bootstrap-responsive.css) which created some conflicts with services such as Google Maps. Images in BS3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Responsive utilities

For faster mobile-friendly development, BS2 and BS3 provide utility classes for showing and hiding content by device. Beside you can see the changes made between the two versions.

  • BS2 BS3
    .visible-phone .visible-xs
    .visible-tablet .visible-sm
    .visible-desktop .visible-md
    .hidden-phone .hidden-xs
    .hidden-tablet .hidden-sm
    .hidden-desktop .hidden-md

    Class changes between BS2 and BS3


Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.

Note: BS3 drops support for IE7 and Firefox 3.6 by removing hacks specific to those platforms (such as *zoom: 1, or -moz-box-shadow).



The heading, list and text classes were cleaned up to have more consistent names (for example .muted changed to .text-muted to match the other contextual text colors: .text-info, .text-success etc.).

  • BS2 BS3
    ul.unstyled .list-unstyled
    ul.inline .list-inline
    .muted .text-muted
    .h1, .h2, .h3 etc.

    Class changes between BS2 and BS3



In order to avoid conflicts with third party code, BS3 do not style tables by default. For basic table style you will need to add the base class .table to any <table>.

BS3 introduces a new contextual table class: .active which highlight the row the same way you could do it by being hover it with your mouse (if using the .table-hover class).

  • BS2 BS3

    Class changes between BS2 and BS3



BS3 does not use .input-prepend and .input-append but .input-group instead. The classes have changed for the elements within, and require a bit more markup to use buttons.

Horizontal forms are now mobile-first, meaning that for screens <768px, elements are stacked. Above that, elements are floated and appear side-by-side.

Note: All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Height sizing

Using the old classes .input-small and .input-large you now can change the height of any form controls (that match button sizes).

  • BS2 BS3
    .radio.inline .radio-inline

    Class changes between BS2 and BS3



Buttons style have been simplified: no more outer box-shadow by default, no more gradient or text shadow.

Note: Default button now requires .btn-default class.

  • BS2 BS3
    .btn-mini .btn-xs
    .btn-small .btn-sm
    .btn-large .btn-lg

    Class changes between BS2 and BS3



BS3 consolidates image thumbnail styles in disfavor of .img-polaroid that disappears.

Note: Remember that images can be made responsive-friendly via the addition of the .img-responsive class.

  • BS2 BS3
    (for regular inline(-block) images)

    Class changes between BS2 and BS3



Glyphicons as you know them in BS2 have changed. First of all Glyphicons are not included in the BS3 package. It has its own separate repository. Second of all Glyphicons (v1.7) is now using @font-face instead of old PNGs.

This changes keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries (such as Font Awesome), and makes Glyphicons available to more people outside Bootstrap.


Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.

Dropdown menus



Dropdown menus introduces dropdown headers. It adds a header to any dropdown menu as you can see on the screenshot beside.

Note: Unfortunately BS3 does not support submenus as the code necessary to make them work is “just too much overhead”… I am really sad about that as WordPress themes like my own: ShprinkOne WordPress Theme require a 3 level menu that is now more difficult to produce.

  • BS2 BS3

    Class changes between BS2 and BS3



BS3 introduces the .btn-group-justified class that makes a group of buttons stretch at the same size to span the entire width of its parent.

  • BS2 BS3

    Class changes between BS2 and BS3



<hr> elements within any .alert component will now be styled to match the border color of the alert. Immediate children links within default alerts, and within paragraph text, are now styled for improved readability. Links are automatically bolded and appear as a slightly darker color than the alert text.



The nav option: .nav-list has been removed and is now replaced by the new List group component (See the List group section below). BS3 also removes the ability to have tabs on the left, on the right, or at the bottom.

Note: You can still use the JavaScript plugin and custom CSS to make left/right tabs, but we will no longer include those in the core.

  • BS2 BS3

    Class changes between BS2 and BS3



Overhaul styles of default navbar and its sub-components. For example the height of the navbar increased from 44px to 62px for mobile devices, and 50px for desktops and there is no more box-shadow or gradients on the navbars.

  • BS2 BS3
    .navbar > .nav .navbar-nav
    .btn-navbar .navbar-toggle
    .brand .navbar-brand

    Class changes between BS2 and BS3

List group


BS3 introduces a new component: the list group. It creates simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options.

Basic list group

Basically what we had in BS2 with the .nav-list class.

Note: Add the badges component to any list group item and it will automatically be positioned on the right.


	<ul class="list-group">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>

Linked list group

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.


	<div class="list-group">
		<a href="#" class="list-group-item active">Cras justo odio</a>
		<a href="#" class="list-group-item">Dapibus ac facilisis in	</a>
		<a href="#" class="list-group-item">Morbi leo risus	</a>

Custom content

Allow you to add nearly any HTML within .list-group-item item.


	<div class="list-group">
		<a href="#" class="list-group-item active">
			<h4 class="list-group-item-heading">List group item heading</h4>
			<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
		<a href="#" class="list-group-item">
			<h4 class="list-group-item-heading">List group item heading</h4>
			<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>




Badges are basically the same in BS2 and BS3. Though they adapt better to different components (such as List group: See the “Basic list group” example above) and have a special style when the parent has the .active states

Typographic components


BS3 has a lighter font-weight for headings (.page-header) than BS2. font-weight: 500; VS font-weight: bold;

Note: BS3 scale the font size in responsive views.

  • BS2 BS3
    .hero-unit .jumbotron

    Class changes between BS2 and BS3

Progress bars


BS3 new structure is now .progress on the outer <div> and .progress-bar on the inner <div> (See example below).

			<div class="progress">
				<div class="progress-bar"></div>

Instead of placing modifier classes on the parent, they are placed directly on the bars (e.g., .progress-bar-info) in addition to the required .progress-bar class.

  • BS2 BS3
    .bar .progress-bar
    .progress-info .progress-bar-info
    .progress-success .progress-bar-success
    .progress-warning .progress-bar-warning
    .progress-danger .progress-bar-danger

    Class changes between BS2 and BS3



The need of creating boxes (with optional header and footer) is something BS2 missed. I am happy to say that BS3 rectified this mistake by creating a new component: the panel.

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1><h6> with a .panel-title class to add a pre-styled heading.


	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		Panel content

Panel with footer

Wrap buttons or secondary text in .panel-footer.


	<div class="panel">
		Panel content
		<div class="panel-footer">Panel footer</div>

Contextual alternatives

Like other components, BS3 allow us to make a panel more meaningful to a particular context by adding any of the contextual state (success, warning, danger, and info) classes.


	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		Panel content

If I missed anything please let me know by commenting or on Twitter, and I will update 🙂


Introduction to Twitter’s Bootstrap PPT

Today I presented an introduction to Twitter’s Bootstrap at eBay Shanghai. I was invited by a front end community of practice that wanted me to share my experience on this great Open Source project. Around fifty persons gathered to talk about the web best practices and new technologies.

Here is the structure of my presentation:

  • What is Bootstrap?
  • Bootstrap Features
  • Why using Bootstrap?
  • Built with Bootstrap

Let me know what you think about it and do not hesitate to share!