TechTheDay

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

This is where Picture element (written as a proper noun here to avoid confusion) comes into play (an element is an individual component of an HTML document or web page). Before the introduction of the Picture element, web developers already thought of a solution on how to downscale images to suitable sizes first before rendering them on a browser (not loading the full image size). This solution involved the use of JavaScript. However, new versions of web browsers defeated this solution because of their prefetching tools. Web browsers like Chrome and Firefox now prefetch or download images first before parsing a page’s body, before they even know where the images are to be located on the page. As such, the solution of using JavaScript to downscale images creates an additional burden to the web browser and makes web page loading even longer.

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.

Using the Picture element entails additional work but it efficiently handles the optimization of images in responsive web design. With it, a JavaScript-based approach will no longer be needed. It has to be emphasized, however, that the Picture element does not automatically scale up or down the resolution of images. What it does is to provide the HTML standard that allows website developers to specify different (resolution) versions of an image to be shown depending on the device or web browser that accesses a particular website. Also, it does not replace the Image element (<image>) but is meant to work with it.

Availability

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.