Rethinking Graphics on the Internet

Optimizing web pages is a never-ending task, and when every millisecond matters, vector based graphics are the way to go.

It was hard to discuss web design in 2014 without referencing responsive web design. Considering the growing landscape of screen sizes, designers and developers were, and still are, looking to code a device agnostic layout that would work anywhere.

What exactly is the problem?

Opening any page on the internet involves a handful of protocols, handshakes and hops across the globe. Many of these processes happen automatically as far as website owners and visitors are concerned, and they are out of the control of the general population.

The most effective way to improve a website’s performance is to optimize the backend code on the server that produces the necessary pages and to ensure that the final product renders quickly on the user’s browser.

Delivering pages to users requires bandwidth, which, according to internet service providers, is increasingly hard to come by.

Using CNN.com as an example, the size of the homepage HTML and CSS code is 100 kilobytes. After factoring in images, scripts and other media, the total size of the page comes to 3.6 megabytes. More than 75% of the total download is bandwidth-heavy media. In order for that media to vary to fit different users’ screens, the page must include the code necessary for several HTTP requests. The extra requests can easily slow the loading of a webpage.

Responsive web design shaves page load times by efficiently condensing a desktop, tablet and mobile website into one document. Optimizing pages to be as lightweight as possible without sacrificing appearance is a top priority for today’s web developers and their clients.

We’ve had the solution for years

Two main image formats are used online: bitmaps and vector graphics.

Bitmaps save image information as a grid of pixels. These are the instructions that draw the image. Bitmaps are the most common type of image around the web because that is how photos are saved on your computer’s hard drive.

Vector graphics, including scalable vector graphics (SVG) save image information as a vector, or mathematically defined path. Compared to their bitmap counterparts, vectors are significantly smaller because their file contents is instructions for rather than a map of an image. Vectors are ideal for simple graphics such as share icons and can even be complex enough for a logo.

Every major mobile and desktop browser (except IE8) has basic support of SVG. It works identically to using bitmaps on your site, except instead of each file needing a separate download, you can serve the image along with the CSS.

Not only smart but also stylish

In addition to including your images with your content in one swift download, there are tons of impressive visual effects you can do with SVG. Because the entire image’s maths are visible and editable for Javascript and CSS, complex and fluid animations can be rendered without using Flash. Considering the security issues and hardware saturation Flash presents for its users, working around it is a great benefit.

Applying stylish effects to text is traditionally done in image editing software and saved as a bitmap for the web. The benefit to this is that you get text that looks exactly as desired and looks consistent across different screens, but using a static image means making a new image for each piece of text.

With SVG there are extensive filter effects extrusions: transformations, shadows, borders — almost every text effect you can make in Photoshop. These filter effects are applied only if the browser is supported, and will show up as normal text as a fallback.

Since the structure of SVG is human-readable XML, editing filters can be easier than navigating your way around an image editor and can be done with any text editor. Styling text this way adds computation time to the user’s browser, but the average person has a far better computer than what was common 10 years ago.

Knowing when SVG is right for you

Someone discovering SVG for the first time might think it was the solution to all of the web’s problems. This is half true, but there are still some very good reasons to continue using bitmaps. Photos taken with a camera should always be saved as JPGs since the math required to perfectly render them in vectors does not exist.

SVG images work best for small graphics which are used to enhance the page, but are not a core part of its uses. These include things like bulleted lists, social network share icons, repeating backgrounds and simple images made up of lines and shapes.

Using SVG filters is not the best choice in all situations because their support varies from browser to browser. Effects such as text shadows and 3D transformation are actually doable in CSS and have much wider support. Using more advanced filters will require more research.

Web design was simpler when everyone had the same desktop resolution of 1024 x 768. Vector based graphics are not a new invention, but they are gaining momentum since they update practices that have been around since the web’s early days. Delivering your website’s content is top priority, and now you can make it look good without slowing down.

--

The SVG Revolution

With SVG, images are served along with the CSS, eliminating the need for downloads.

Traditionally: Images are added to websites by referencing the image file in the HTML document with CSS code, which looks like this:

#shareicon { background-image:url(”/images/logo.svg”); }

The issue: This creates an additional HTTP request that can impact your site’s performance when you have dozens of images to load.

The new method: Use math to embed the image directly in the CSS file:

#shareicon { background-image:url(”/data:image/svg+xml,<svg fill=”#14668a” height=”30” viewBox=”0 0 50 25” width=”21” xmlns=”http://www.w3.org/2000/svg”><path d=”M12 7c-2.76 0-5 2.8 8-8 8z”/></svg>”); }

That may look like a bunch of random numbers and letters, but it is actually the contents of an SVG image generated with image editing software. Adding images this way greatly improves your site’s load time. And your CSS is cached in the user’s browser after the initial load.