The picture element: saving bandwidth, data and possibly the world

March 22nd, 2016

At Opera, we do everything we can to make the web leaner and smaller, so you can get the content you want faster and use less of your precious data.

So, it’s with enormous pride that I saw Safari announce yesterday that it will be joining the other major browsers (Opera, Chrome, Firefox and Microsoft Edge) in supporting an important piece of tech which I helped develop called the HTML picture element.

What was the problem with images on the web?

Long ago, in a galaxy far away (or 2011 in Birmingham, UK), I was pondering a complaint that I’d heard from many web developers at conferences I speak at. Their problem: if they use huge gorgeous-looking images, they might look great on high-tech devices but they need to be shrunk for others (such as feature phones). This drains your battery and hogs your data, as well. Not fun at all, especially when huge images aren’t useful on those devices in the first place.

Why were developers publishing dumb images?

Unfortunately, developers didn’t have much choice. They were using a system called the HTML img element. This element makes it so when you put an image on a page it uses just the one version of the image, which might not be a good fit for your device.

I asked, thinking of Goldilocks, what if we could serve multiple versions of the same image, so that your device could find just the right fit?

But, Bruce, did you pull it off? Did you make smarter images?

Yes! But, not alone. I knew I was on to something important and, as if often the case, it takes the brainpower of many to get the ball rolling.

With the help of American developer Mat Marquis, Marcos Caceres from Mozilla, Tab Atkins from Google and Simon Pieters from Opera, the idea grew into something that could actually flipping work!

Then, a C++ developer called Yoav Weiss (now at Akamai) launched a crowdfunding campaign to raise $10,000 to stop doing client work so he could implement this solution in Blink, the engine that powers Opera for computers, Opera for Android and Google Chrome. Opera contributed $1,000.

Great! We have the picture element. Um, why is this so important?

Given that the average web page is over 2.2 MB , of which over half is images, the picture element gives people a significant reduction in page size – which translates as faster pages and lower costs for all…woohoo!