Next.js and Google Best Practices for Images: How It Relates to Web Standards
At its recent virtual event, Next.js — a leading open source JavaScript framework built on top of the React library — announced that it would be improving what Next.js creator Guillermo Rauch, in his keynote address, called “one of the most important primitives of the web: the image.”
Basically, a core tag of the web’s default markup language HTML, <img>, has been supplemented in Next.js by a new “React-based image component,” <Image>. Note that this <Image> component is not a drop-in replacement of <img> at the browser level, but at the developer library level. Indeed, the Next.js project team informed me that <Image> is an optional replacement that “yields better performance” and you could in fact use <Image> and <img> in the same page.
As Rauch noted in a tweet, the new component “…uses very powerful web standards underneath, automating them. Instead of having to write and remember several different tags and attributes, React abstracts it away.”
Next.js partnered with Google to create a new component.
“The Google Chrome team helped us create this React component to improve page performance, by making best practices the default,” said Tim Neutkens during the event’s opening session. Neutkens is Head of Next.js at Vercel, the company Rauch launched in 2015 before releasing Next.js the following year.
“At its most basic, the Next.js Image Component is just a drop-in replacement for the HTML image element, but evolved for the modern web,” explained Neutkins.
Here’s what the code change will look like (via Next.js documentation):
It should be emphasized that no web standards were hurt during the making of this component (as I incorrectly asserted in the original version of this article). Houssein Djirdeh, a Developer Advocate at Google, noted on Twitter that the <Image> component “is built on top of the image standard” and that the goal was “to build a wrapper on top of” the HTML <img> tag “to improve both the developer and user experience.”
So in summary, the new component is an example of building convenience libraries on top of web standards to make developers’ lives easier (hat-tip Owen Campbell-Moore, a Senior Engineer at Facebook, for that wording).
Best Practices and Web Standards
The new <Image> component will only be used by developers who use Next.js, so it doesn’t mean that other developers won’t continue to work directly with the <img> HTML tag and all its attributes.
It can also actually improve the performance of older web browsers. “The <Image> component is implementing web standards for older browsers, and it’s uniquely poised to do so because we are a JavaScript framework,” explained Joe Haddad, a senior software engineer at Vercel. “Without JavaScript, you’d have to wait for all of your visitors to upgrade their browser version.”
Despite the technical benefits, it’s worth raising a couple of questions going forward. For one, are web developers becoming too reliant on relatively bulky JavaScript frameworks like Next.js and neglecting plain old HTML? And secondly, even though Next.js and other popular frameworks still rely on web standards, should we be at all concerned about Google’s role? Google is, after all, one of the most powerful technology companies in the world and so, for better or for worse, it’s in a position to heavily influence web standards going forward.
Let’s first look at what the “best practices” approach of Next.js and Google, in developing the <Image> component, has actually resulted in.
“When using the Next.js Image Component, images are automatically lazy-loaded,” explained Neutkens during the Next.js virtual event, “meaning they’re only rendered when the user is close to seeing the image. And by enforcing image dimensions, browsers immediately render the space needed for the image instead of having it jump in when loaded — this prevents layout shift.”
From a technical point of view, this does sound good. But what role (if any) should the web’s governing body, the World Web Consortium (W3C), play in the development of best practices like this? Although, Vercel’s Joe Haddad pointed out that the ability of the Next.js image component to lazy load images “is actually in the HTML standard, via the loading=lazy attribute.” So in a sense, the W3C is already a part of these innovations. Haddad also noted that the W3C is no longer the sole governing body of the HTML specification — it’s now led by WHATWG (Web Hypertext Application Technology Working Group), a group consisting of Apple, Mozilla, Google and Microsoft.
I bring up the W3C mainly because Google owns the dominant web browser of this era, in Chrome. So there is a parallel here with Microsoft in the late 1990s, when its Internet Explorer dominated the browser market. Perhaps it’s unfair to compare Google Chrome with IE, but in both cases, you have one company creating best practices that most web designers then had to adhere to (simply because of market dominance).
Indeed, the Microsoft versus Netscape browser wars of the 1990s is what eventually led to the W3C starting its web standards project. As the W3C tells it:
“In 1998, the browser market was dominated by Internet Explorer 4 and Netscape Navigator 4. A beta version of Internet Explorer 5 was then released, and it implemented a new and proprietary dynamic HTML, which meant that professional web developers needed to know five different ways of writing JavaScript.
As a result, a group of professional web developers and designers banded together. This group called themselves the Web Standards Project (WaSP). The idea was that by calling the W3C documents standards rather than recommendations, they might be able to convince Microsoft and Netscape to support them.”
One big difference between Microsoft in the 1990s and Google in 2020 is that the latter is a proponent of open source software. It has, as just one example, open sourced its browser software Chromium.
I certainly don’t doubt Google’s intentions. Dion Almaer, Director of Engineering at Google, wrote a good thread on Twitter about why Google chose to help Next.js create its <Image> component. “We notice that most developers use frameworks, CMSes, and tools,” he wrote. “We want to understand developers’ needs here and help. The spirit of this is working with the ecosystem.”
Point taken that Google is working with web standards, not against them. With that said, much of what is driving Google and Next.js here is a standard of a different kind: performance. Rauch indicated as much in his keynote address.
“The image element was introduced back in 1995, but has seen very little evolution since,” Rauch said. “However, on average, images will make up 50% of the average webpage size. When left unoptimized, images will hurt your site’s performance, and consequently your user experience and your conversion. Next.js 10 solves this.”
WebP
Another interesting aspect of the new Next.js image component is its support of the lesser-known image format, WebP (Web Picture format). While formats like JPEG, GIF and PNG (the latter created by the W3C) are decades old and well accepted as image standards on the web, Next.js and Google want WebP to get more love.
WebP actually came out of Google, which announced the new format in 2010. While it is open source, it has so far not been acknowledged on W3C’s long-running page, Graphics on the Web (indeed, that page hasn’t been updated since 2003 — which may partly explain why Google went the open source, rather than web standards, route). However, WebP is mentioned in the WHATWG HTML Standard (which superseded W3C’s HTML standard) and is also in Mozilla’s list of image formats.
The primary technical benefit of WebP is that file sizes are lower than the likes of JPEG and PNG. In an FAQ, Google states that “WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality.”
However, not all current browsers fully support WebP. Apple’s Safari only recently added support, as of September 2020 (and only in the latest versions of MacOS). Microsoft’s Internet Explorer doesn’t support WebP, although its new Edge browser does — primarily because Edge runs on Google’s open source Chromium software.
What’s that other thing Google is well known for… that’s right, search! While there’s no suggestion Google is biased towards websites that use WebP in its search results, back in 2018 it did roll out “mobile-first indexing” — which, among other things, favors “fast-loading content.” So whether it’s explicitly stated or not, there’s a clear SEO benefit in using WebP.
But let’s get back to the Next.js announcement. Along with the new image component, Next.js announced something called “Automatic Image Optimization.” This involves automatically “resizing, optimizing, and serving images in modern formats like WebP when the browser supports it.” However, Next.js will always fallback to serving a JPG or PNG for browsers that do not support WebP.
That suggests that if you’re using a Chrome browser — as most web users now do — then if you’re consuming a website built with Next.js, chances are the images you’re viewing are WebP. Which, it bears repeating, is not a web standard according to the W3C. Not yet, anyway.
Conclusion
If you’re a developer, it’s hard to argue against the “best practices” approach to web technologies that both Google and Next.js espouse. There are clear technical benefits to using the new image component of Next.js. Likewise, there appear to be solid technical reasons to use the WebP image format — especially if more and more browser products are being built on Google’s Chromium technology (Microsoft Edge, Opera and Brave are just a few current examples).
But for those of us brought up in a web that was defined by (and thrived in) the use of W3C web standards, there’s reason to at least ask some questions about how the increasing reliance on JavaScript frameworks will impact web development — particularly if Google is putting its immense weight behind these innovations. Yes, there are clear benefits to developers in abstracting away the HTML <img> tag and replacing it with technically superior functionalities. But let’s not forget who also benefits here: a certain large internet company that just happens to have the dominant browser and search engine on the planet.