Thursday, March 28, 2024

Make Your Site Faster with Hardware Accelerated HTML5 and the Cloud

Imagine you run a start-up website. Users visit to learn about the latest cool tools and technologies for creating amazing multimedia sites of their own with animation, video, audio and social media integration. Your site must be a fast, high-quality user experience on the PC, mobile devices, tablets or even giant screen TVs, without having to encounter pixilated or squashed graphics.

What really makes it different is that your users can create their own multimedia projects on your site. They share their “masterpieces” with their friends on social networks, bringing more people to your site. Anyone can access the projects from any device and contribute to it. You make money through ads and when your users subscribe to a premium tools package with more allocated project space.

This site experience and set of features are not only possible, they’re part of a larger web and computing experience occurring right now. Web developers use the “cloud” to create these virtual media playgrounds and to take advantage of humongous storage capacities and low costs, and then stream the fun down to users. Users get a better multimedia experience when they have a browser that is fast enough for streaming content from the cloud. They can access it anywhere, including larger size computers, such as desktop and laptops, and more portable devices like smartphones and tablets. Developers need only use HTML5 markup like scalable vector graphics (SVG) and video/audio that are supported across many browsers and devices to make it a reality.

Media in the Cloud

HTML5 brings with it a whole new set of possibilities for multimedia on the web. Using simple markup, media in a cloud environment can be accessed directly, streaming to the browser without the need for a plugin or special player.

The idea of a cloud hosting media is not new. It’s nothing more than a big server farm where Internet processing occurs — a large number of websites sitting on servers awaiting requests. The game-changer is that HTML5-enabled browsers work closely with the native operating system (OS), taking advantage of the underlying hardware to make the video streaming experience faster for your users when accessing the cloud. You can take advantage simply by using HTML5 <video> and <audio> plus a few tips & tricks. When your users view and edit their project, it stays in the cloud without having to implant the site tools or the project file on the client’s computer (other than the browser itself). Upgrades and changes made in the cloud need no upgrade on individual clients — at least not as frequently as required with downloaded systems.

You can learn more about how to use HTML5 media with the cloud here:

Hardware Acceleration for the High-Performing PC

About 60 percent of today’s computing usage is done through a browser. Most of your user projects are created using a PC with a dedicated graphics card or integrated chipset. But most browsers are not designed to work through the OS, which controls most of the hardware. Buying an expensive PC with a graphics card is not worth it if your users can’t take advantage of it. For example, online games played across the internet may lack the hooks into client computer’s graphic processing unit (GPU). The GPU on your computer is the processor that accelerates graphic rendering.

One way to speed up graphic rendering is to direct the more intensive tasks (like multimedia streaming) to the GPU. Developers need only use the markup supported by the browser to take advantage of it. The process of doing so is hardware acceleration. Microsoft began this trend while engineering Internet Explorer 9 (IE9) to work closely with Windows 7, focusing on ways to speed up HTML5 and CSS3 animated graphics. Other browser makers like Google are also working on their own versions of hardware acceleration.

While this new technology emerges, browsers will vary in their ability to render multimedia and games so developers should think about how to provide the best experience for their users that demand it but also ensure it works well in all browsers. This process is called graceful degradation. For example, one online game, “Pirates Love Daisies,” provides a checkbox for IE9 users to view a more graphic intensive version (with marine layer clouds, in this case). The reason that the option is available is that browsers without hardware acceleration may have difficulty rendering the added graphics. Figure 1 shows IE9 with the option button.

Image 1

Figure 1: Hardware acceleration speeds up graphic rendering.

In graphic rendering tests using different browsers and different computers, the results were surprising. An older 64-bit PC with a NVIDIA GeForce 8400m GPU running Windows 7 ran faster than a new 64-bit Mac with an AMD Radeon HD 6970 GPU. Using Google Chrome 12 on the Mac and IE9 on the PC, a Fishtank Speed Test with 100 fish resulted in the Mac rendering 12 frames per second (FPS), while the Windows 7 PC rendered 23 (see Figure 2). I would expect to see a round of browser wars in the near future that attempts to optimize hardware acceleration. In the meantime, test the Fishtank Speed Test using your system and browsers to see what you get.

Image 2

Figure 2: Comparing “Fishtank” results.

See hardware acceleration in action on these sites by comparing different browsers yourself:

Scalable Vector Graphics: Performance for the Huge Screen to Mobile Device

What do you do when your users aren’t using a computer with a GPU? HTML5 Scalable Vector Graphics (SVG) is a technology that takes advantage of hardware acceleration when you have it and maintains an acceptable level of performance when you don’t. As the name implies, an SVG’s vector graphic changes size to best fit the screen on which it’s displayed. For example, you can scale the same SVG graphic for a two-inch smartphone screen or a 17-inch PC screen or without encountering pixilation or distortion. Using JavaScript and Cascading Style Sheets 3 (CSS3) selectors, designers can create style sheets and then select (with CSS3 selectors) different aspects of a style that fits any size screen proportionately or resize for space considerations.

For example, an image might take up half a horizontal screen on a desktop browser, but that same proportion makes the page on a mobile device appear crowded. The CSS3 selector selects a style that reduces the SVG file to only a quarter of a mobile screen. The viewer, of course, has no idea that the changes are the result of coding — she just sees attractive Web pages on the different devices.

Many artists will use their current tools like Adobe Illustrator to create SVG graphics and the Bezier pen to create canvas graphics dynamically. But you can also expect to see a host of new tools become available that enable you to write code for rendering graphics in canvas (CSS3, HTML5 and JavaScript). Given the different “stages” for different devices used on the Internet, flexibility is essential.

You can learn more about how to use SVG here:

Conclusion

Web developers need only use HTML5 markup to take advantage of hardware acceleration with the power of cloud environments where data can be accessed across many devices. For your site, use technologies like SVG to optimize the experience for both larger size computers, such as desktop and laptops, and more portable devices like smartphones and tablet computers. Learn more about hardware acceleration here.

About the Author

Ed Tittel is a full-time freelance writer, trainer, and consultant who has written more than 140 books, including his latest, HTML, XHTML and CSS For Dummies, 7th Edition (Wiley, 2011), with Jeff Noble. He’s been active in the computing industry for more than 25 years, writing about Windows platforms, markup languages, IT security topics, and IT certifications. Ed contributes regularly to various websites, including DummiesHTML.com, TechTarget, Pearson IT Certification, and Tom’s Hardware.

This site does business with companies mentioned in this article or associated with the technologies.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured