With the final layer style applied in your Photoshop document (PSD), you just finished your web design masterpiece. Everything is JUST the way you want it and you know it’s time to begin development. Now you’re faced with a pretty big question: What parts of the design should be achieved via CSS, and which elements should I take straight from the PSD?
Pros of Using Images
It’s safe to say that using images straight from the PSD is the easiest way to achieve the exact look on the website as it is in the design. In some cases, it might even require less time to develop. Using images also let’s you do some stuff that can’t be achieved with CSS at all.
Cons of Using Images
One of the biggest issues with using images is that it can dramatically increase the loading times of your website. Especially if you’re using a really large background image. Sprites can help in this area, but more often than not, sprites are not an option.
Another issue is what I call “Non-Adapting Design” or NAD. What I mean by this is that some parts of the website may grow or shrink depending on how much content there is in that space (especially if it is a user controlled WordPress theme). Using images is a nightmare when dealing with a NAD. You have to make sure they can grow and shrink with the content. It may sound like an easy thing, but depending on the design, this can have a huge impact on the time it takes to develop the site.
Pros of Using CSS
Now that CSS3 is almost totally supported, you can do some really cool stuff with CSS that you couldn’t do before. Rounded corners, box shadows, text shadows, animations, etc. The list of things you can do seems to be increasing every few months.
One of the most advantageous features of CSS is the ease of making changes to the colors or overall look of the design. If you’re making a WordPress theme, for example, you can set it up so that the end user has control over the actual design of the site. This is something very difficult to achieve with images alone.
Cons of Using CSS
While there aren’t many cons, the biggest has to be compatibility. Some browsers, mainly Internet Explorer (of course), don’t fully support all the features that CSS has to offer. What this means is that in some cases, you’re CSS design in FireFox may look completely different in IE. The good news is that it is generally agreed upon in the web design community that it is OK if your site doesn’t look identical in every browser.
Conclusion
Let me put it this way, if you can do it with CSS, DO IT WITH CSS. Images should only be used if the design absolutely cannot be achieved with CSS. With Google putting more focus on site loading times, it’s time we start focusing on ways to slim down the weight of our pages. Getting rid of images [when possible] is probably the BEST way to do this.
If your design requires the use of images, be sure you properly prepare the image for websites. Photoshop has some options for doing this, but there is also an online solution called Smush.It by Yahoo!