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
- First, Hybrid delivers a low-quality version of the images, which are extremely fast to load for any type of connection.
- 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).
- 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.
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.