Responsive Images: Ultra-Fast Loading & Ultra-High Quality

Hybrid is the very first WordPress Theme to introduce a new kind of Responsive Images: Hybrid Images, a new high-end mechanism now used by Google that provides first-class experience for all users, allowing lightening-fast image loading while still offering super-high image quality simultaneously. Sounds impossible? Read on.

A Real Challenge

The main concept of the Hybrid Theme is to offer instant page-load while still offering rich content and features. With the new Hybrid WordPress Theme we focused at increasing the potential behind every images by greatly increasing their quality for high-pixel-density displays, and in the same time providing low-res images for slow bandwidth users. This was a real challenge and we greatly overcame it!

Hybrid is glad to introduce the new Hybrid Images mechanism exclusively featured in the Hybrid Theme, it offers instant page-load while still offering high-quality images. Rendering an entire site at a lightening speed is technically challenging, and while there are incredibly efficient compression methods for all text-based content (minifying, merging, gzipping), it’s a whole other story when it comes to images. Until now we made use of techniques like CSS Sprites to reduce the number of HTTP requests, which is a good and efficient technique that is still in use, however the quality of the images was still limited to keep a reasonable compromise between quality and load time.

How Hybrid Does It

  1. First, Hybrid delivers a low-quality version of the images, which are extremely fast to load for any type of connection.
  2. Second, depending on the display definition, the low-quality images get quickly replaced with either standard-quality images (devicePixelRatio of 1) or high-quality images (devicePixelRatio above 1).
  3. The replacement process waits until the higher-quality version of the image is fully loaded until it replaces the low-quality one, allowing a smooth, almost invisible transition between the two images.

Fully automatic

In practical terms, you only upload your images once in their higher quality, and the two other variants are generated automatically: No configuration nor maintenance required, the process is fully automated.

About

Jonathan is a senior Web Developer with 8 years of professional experience. He as worked for the largest groups in the airline and banking industries. Jonathan is the formal founder of the Maddim Agency, which is specialized in Web Performance and Page-Load Speed. — Follow JoNa on Twitter

6 comments


  • Tornaldo

    I must say that this is truly awesome, images seem to appear quit instantly, and moments after the page loading we can then admire a quality improvement, all smoothly and with no visible flash or anything… really great job, very effective!

    is it the same technology used on Facebook?

    • admin

      Thanks Tornaldo! Yes it is a similar technique as the one used on Facebook, however on Facebook it shows the thumbnail (scaled up) until the big image is loaded. The drawbacks of the Facebook approach is that when no thumbnail is loaded (for example when you hit Next directly within a photo gallery) then you see a black background waiting for the actual image to load.

      The Spark variant of this scenario is that you would first see a low-res image almost instantly, and which will transform to a high-res image whenever the later is loaded.

      Spark and Facebook are also using progressive compression, allowing progressive load (you start seeing the image instantly before it has finished loaded).

    • Tornaldo

      Woaa nice to see that even my gravatar is in high-def when seen on my Retina MacBook Pro!!!

      I guess it must be a Spark feature because this very same gravatar appears normally on other sites.. really REALLY nice job, it’s all in the details!

  • If you have access to the new “Google Images” this is exactly what they’ve done: display a low definition temporary image until the high definition one is loaded up, and this makes the whole experience a lot smoother!

    Thanks JoNa for bringing this technology to the WordPress world :)

Leave a Reply