5 Tips for Using CSS and Real Text Over Images

When it comes to performance and Responsive Design, there are a myriad of best practices that can boost site speed. Back in August, we narrowed these best practices down to the top 20 to help you determine where the biggest performance gains are to be had. Today, I want to review in detail our number one tip; whenever possible, you should use CSS & real text over images.

This single concept increases site speed, search engine performance, and crispness on high-resolution screens — it's like killing three design challenges with one stone.  Here are practical tips to put this best practice into action.

Let Your Text be Text

Avoid the inclusion of text in raster graphics. Yes, I know it’s 2014 and not 2004, but you might be surprised by how many high profile websites still embed text in jpg and png files. Not only does this hurt performance, but it also misses the opportunity to create ultra-crisp text for the world’s latest and greatest screens.

A decade ago, there were valid reasons to include text in image files, but I’m not letting you off the hook today. Now, we can use virtually any font in the world (@font-face) and we can control anti-aliasing preferences with simple CSS properties.

I’m not asking you to perform magic and make imagery out of text (hooray for ASCII art). If a section of your design layers text on top of an image, save the raster graphic (without the text) as a lossy format to reduce file size, and then layer real, lossless, razor sharp HTML text on top of it by adding the raster graphic as a CSS background image.

Certain text layouts designed for desktops do not work for small screens. We've all seen “responsive” websites that embed text in png files and scale the image down to fit the viewport, which results in microscopic, illegible text for mobile users.  By keeping your text independent from your raster graphics, it is a piece of cake to adjust text styles for optimum readability at every device size.

Conversely, sometimes you need your headline text to take up precisely 94% of the available width and want it to retain this ratio perfectly even as the viewport shrinks. This used to be the domain of images but now we can leverage a JavaScript plugin like FitText and our HTML text resizes effortlessly. 

By using real text, we also make our content more accessible to humans and search engines alike. Do you know what is more accessible than an “About Us” PNG with “About Us” as ALT text? Real HTML text that reads “About Us.” Also consider that using images as text makes localization much more difficult to implement. Let your text be text!

Leverage CSS Effects

Avoid using images to create visual effects like gradients, shadows, or transparency and instead utilize modern CSS.  Even for more advanced effects such as 2D rotation or 3D perspective changes there is no need to use images. Global browser support for some of CSS's shiniest toys has improved dramatically over the last several years, and every image asset we can eliminate results in a huge performance gain.  Even if the images you used to create these effects were only a few kilobytes, we are still drastically improving performance by cutting down on our number of HTTP requests.

Don't Use Images for Basic Shapes

Does your website feature shapes that don’t consist of only perfect 90 degree angles? Of course it does!  When I was younger, after I got home from walking uphill in the snow both ways I had to create PNG files for any non-rectangular website shapes.  Luckily, those days are long gone!

Rectangles with rounded corners have been a stroll in the park for CSS for years, but with a sprinkling of creativity and a peppering of pseudo content (i.e., ::before and ::after)  we can create all sorts of other shapes with pure CSS. The blue date tag shape at the top of this very blog post is an example of using CSS to create unique shapes.  Don't underestimate CSS's shape creating abilities (check out this fun example).

Once again, even if the image files you previously used to create shapes were only a few kilobytes we are still creating sizable performance gains by reducing HTTP requests. The fewer files we force visitors to download the better!

Icons Without Images

This may be a matter of semantics, but your website's icons do not need to be (raster) images. Icons are typically comprised of simplistic lines and curves, which makes them the perfect candidate for vector solutions like icon fonts or SVG sprites.

You won't save many HTTP requests compared to the battle-tested png sprite method, but you can avoid the chore of creating separate x2 and x3 assets for high resolution screens since vector solutions scale infinitely (yay for future-proofing your icons). There is also potential performance gains to be had as you can use CSS to adjust the hover/tap state (color, size, etc.) instead of forcing users to download two versions of each icon.

Images Aren't Evil

Don't get the wrong idea; the image is still a designer's close friend. We are definitely not encouraging the removal of imagery from websites for the sake of speedier page loads. We want a beautiful web full of captivating imagery! What we are suggesting is a closer look at the technologies that come together to create your website. Images come at an incredibly high performance cost so they should only be used when they are the best tool for the job. In other words, one of the best ways to increase site performance is to reflect on Maslow's hammer every time you find yourself reaching for an image during development.

This post is the first in a series of detailed entries from our “20 Ways to Increase the Performance of a Responsive Design Site” list. Check back for more Responsive Design best practices.

 

Join the Discussion