random posts about nerdy stuff

Vector vs. Raster Images for Web

In the world of HiDPI screens and responsive websites, having high quality images in your website designs is a must. Graphics, especially ones that include text, must be readable at varying sizes when viewed on desktop and mobile devices.

Each browser renders images a bit differently, and web browsers on Windows might render a bit different than on Linux or Mac.

Raster Images

JPG, PNG and GIF images are all raster images. This means that the image is made of pixels each with a single color. If you zoom in on a raster image, you'll see a grid of colored squares that make up the overall image. These formats are best for photos and photo-realistic graphics as they can be compressed in a way that alters pixels by their nearest color while still retaining the same look at higher compression levels.

Example of a rastor image

When a raster image is resized, the browser renders the resized image in the best way it can to retain the image clarity. Modern browsers will attempt to clear up the image with softening filters to prevent pixilation, an effect that looks like sharpening that can produce jagged lines most noticeable in Internet Explorer.

Example of a photo in multiple browsers

Vector Images

Vector images are a series of shapes and lines that can be resized without losing clarity. These image formats are made up of defined points, curves and solid shapes defined by shape, percentages, widths and hues. When a vector image is resized in a web browser, it'll always look clear and crisp.

Example of a vector image

All modern web browsers support the SVG file format for vector images. In most cases, an SVG file can be used like a standard image, though does not always support applied CSS filters. Since an SVG file is basically a text file similar to XML, you can target elements within the image for additional functionality by element ID. Cool stuff.

File Sizes

Having a website that loads quickly is important. The largest file sized elements in a site are most likely images and video, which is why compression is important. Each web asset should be created in the most effective file format possible considering how it'll look as well as how small the file size can be. A logo, for example, will probably look best as a vector image whereas a photo can be compressed as a JPG.

Let's take this iMac graphic, for an example. I exported it from Adobe Illustrator as an SVG, PNG and JPG file, PNG and JPG at 72dpi. Since it's a vector image to begin with, it's nothing more than a series of shapes that is considerably smaller as an SVG.

  • SVG - 4 KB
  • PNG - 13 KB
  • JPG - 20 KB

Browser Support

Now that all modern web browsers support SVG images both on desktop and mobile, it's a good idea to start considering this as an ideal file format in your web sites. Vector images look great on HiDPI screens on our tablets and phones as well as Apple's desktop and notebooks with retina screens. Since they look great at any resolution and can often be much smaller in file size, they're a much better solution than creating @1x, @2x and @3x versions of the same raster file for these different screens.

Pros and Cons of Using a Website Template

For some, the idea of being able to download a pre-built website template sounds like the quickest way to get a site up and running. Though this is the case for some, it may make things even more time consuming in the long run. As with any web project, it is important to have a good plan, including a site hierarchy, user flow, goals and an idea of what sort of content each page might include.

Benefits of using a pre-built theme:

  • Template is a complete, working website out of the box
  • It may include some fancy features that being part of the template, you don't have to build from scratch
  • Theme developers may have spent time making sure the design is mobile friendly and works well across a wide variety of web browsers

These are all things that can help speed up the development process and let you focus on content rather than building a site from scratch. Things like browser compatibility, responsive grids, charts and other animated features might be there ready to go.

Question to ask yourself is "Will my content fit into this theme?"

If you're lucky enough to find a theme that is in line with the site you're building, going with a theme is a fine idea. Here are some great places to find Wordpress and other website themes:

When not to use a theme:

  • A theme doesn't match your content
  • Many updates are required to change the look of the theme to your needs
  • Theme isn't frequently up to date or well supported by the author
  • Comes with a long list of bells and whistles that you don't plan to use

It makes sense that a theme developer will try to fit every possible element and feature into their product, especially when it's one that's for sale. However, if you plan to use a theme as a starting point for your project but don't plan to use many of those extra features, those will just get in the way causing your site to run slowly.

Many systems are so full of these little features or elements you don't want, you might find yourself spending more time just getting things to work than you would simply building on your own.

Design is a big issue for most themes. By using a theme that isn't designed around your content, you aren't able to gain a benefit you would otherwise get from a designer's design which considers your user's experience, calls to action and other elements that may better get your site's point across.

You're the developer, build it yourself

If you're a web designer/developer, your best course of action is build your own stuff. Build from the ground up using tools you can depend on and learn some new tricks. If all you do is rely on a plugin for some site feature, you won't get the benefit of learning how things work. The fewer things you learn how to do, the quicker all this web stuff will start to go over your head. Sure, it might take some time in the beginning, but the benefit is an increase in knowledge and a lean, mean, end product that works great.

A starting point isn't a bad idea though. Things like Bootstrap or other CSS frameworks can save you time when putting together a custom UI.

The Comping Process

When designing a website, the first step is and should always be scoping. This scope is what defines every other aspect of a web project, from cost to content to design. When the design process begins, there are three ways to approach it.

  • Design a static comp in Photoshop or other design software
  • Build wireframes that position things how they might look in the final product
  • Start in the code and build using HTML and CSS for a functional comp

Static Comp in Photoshop

This has been the standard for years, which lets the designers with the experience review the scope and build the look and feel of the site with tools the designer knows well. The end result is a file or series of files that are static images that act as screenshots of what the end product might look like, filled with placeholder or actual site content.

Pros: The design is put together using design tools by an expert in design. Designer defines colors, block treatments, fonts, etc, and the developer takes these resources when stepping into the code.

Cons: Not all designers might be as familiar with how things work in a web environment and may design elements that look great but might not work as well. This creates an uncomfortable position for the developer where an approved look may be time consuming or difficult to translate into a website.

Build Wireframes

For a more data centric, or agile design process, it might be more efficient to simply wireframe the layout and begin development with the goal of defining images, colors and other design related elements later.

Pros: Get started in the code quickly

Cons: Not as much time or focus spent on user experience or the user interface (UX/UI) which may result in a design that's a bit bland.


For many sites, a comp isn't much more than blocks of content or media that are displayed in the browser using HTML and CSS. By starting here, you're addressing two steps of the process at once. This is best handled by a designer who is also a developer, one who knows HTML, CSS, mobile as well as core design principles. By building in the browser, the developer won't get hung up on margins and padding or other inconsistencies that might be included in a Photoshopped comp.

Pros: A design will have to be turned into HTML/CSS at some point anyhow, might as well start there. Some things are quicker and easier to do in HTML and CSS than they are in Photoshop, such as globally changing colors. In addition, you can easily create both mobile and desktop versions of the design at once using CSS media queries so that the client can preview how it'll look in all environments.

Cons: Revisions, especially ones where the client doesn't like the design at all, become potentially more time consuming possibly requiring a larger amount of work to be scrapped. This is also potentially a longer process to complete initially, but minor edits might be simpler and quicker to make.

Best Option

Depending on how a project is managed and scoped, the ideal solution is to come up with a static comp along with a style guide or Style Tiles. This guide defines colors, fonts, sizes, buttons, and other design elements to be used everywhere else. Buy starting with a guide, a developer or designer knows how something should look and ensures that each page follows the same design rules.