Going Turbo: New HTML Element to Make Webpage Loading Faster
As web access becomes available to a wider variety of devices, the need for better web page optimization only gets more punctuated. Google is already promoting the WebP format to make web image sizes smaller and make the Internet faster while Mozilla Foundation is banking on improvements on the JPEG format. However, these efforts are only addressing the image size problem. There is still the bigger problem of optimizing the displaying of images on different types of devices — the wasted bandwidth in loading a full-size image on devices with smaller displays in particular.
Just consider this: will you not prefer loading a smaller image when you are browsing with your smartphone or tablet? Would it be better to load smaller images especially when you are browsing the web with your 3G or 4G connection? Mobile Internet typically costs significantly higher than the unlimited home Internet plan so smaller images are definitely preferable.
Multi-Device Access Optimization
Before, websites used to have their counterpart mobile versions that featured smaller images and an optimized layout. Nowadays, however, webmasters have ditched the creation and maintaining of a mobile version. Most websites are already opting for the “responsive web design” or the designing of websites that automatically change layouts to suit the display size or resolution of the devices that access them.
Responsive web design is indeed an excellent idea. However, it is still not enough. There is still the need to integrate the kind of optimization afforded by mobile website versions when it comes to loading images. Responsive web design does remove the need to tweak page layouts or to create a mobile version of a website. Unfortunately, it also translates to data inefficiency when websites are accessed by devices with smaller displays. Just imagine the amount of wasted bandwidth when you load all the large graphics of a website only to be viewed on a mere 4”-5” display. Low resolution versions of site images would have sufficed but you need to load the full sizes by default.
The Solution: Picture Element
Picture element addresses the problem of multi-device page optimization by not displaying an image but merely telling a browser which image to display. With it, website developers can specify three attributes that will be the basis of displaying an image. These attributes are srcset, media, and sizes. These determine which image to display depending on the web browser and device used. All of these will have to be specified by the website developer right into the HTML code. Essentially, it’s like creating a mobile version for images right within the HTML code of the standard version of a website.
More emphatically written as the <picture> element, the Picture element is a new HTML element available in the dev channel of Chrome and in Firefox 34+. It is not activated or enabled by default. For Firefox, you have to go to the “about:config” section and locate the line “dom.image.picture.enabled” to have it enabled. For Chrome, it is located in chrome://flags/#enable-experimental-web-platform-features. Again, it is only available in Firefox 34+ and the in-development version of Chrome. No recent stable release of It is expected that the Picture element will already be integrated in the stable releases of both Chrome and Firefox by the later part of this year.
Why Not Just Stick with Opera Mini and Mobile?
Opera Mini and Mobile do a great job optimizing web images for a faster and more efficient mobile web browsing. However, they don’t always work as expected. Also, Opera unilaterally decides on the kind of optimization to implement in web pages. There is still be the need for a universal standard for optimizing web pages across all browsers and the Picture element is seen as a very viable solution.
Hopefully, everything would turn out well for the adoption of the Picture element across all web browsers in current use. Together with the improved and smaller sizes of web images in the future, the Picture element is bound to make the Internet considerably faster and enable the more efficient transmission of data on the web.