{ information }

Forget about images

Are you a web designer or developer of this era? Then you should plan your work with a deep hatred for images in mind.

Let me explain why, starting with a short history

At the beginning, there was the Web. It featured a bunch of text and that’s about it. There were slower Internet connections back in the 1990s. You couldn’t simply populate a web page with imagery, sounds or videos like now, because the user would have to wait a lot for the web page to load and nobody likes that; not back then, not now, not ever. So, the developers had to keep it simple.

In the following years, though, the speed got a lot better, and the developers had a lot to play with, so why not take advantage of it, right? They started not only adding images in the content of an article, but on the website layout, too. The concept of slicing came to be, and everybody liked it so much, that it lives on even today.

However, nowadays we also have more advanced technologies to work with. Basically, almost everything you had to do using images, you are now able to do with CSS 3, SVG and custom fonts.

Why is it so important to keep up to date with the latest technologies

You might think that we, the developers, are simply evil and that’s why we constantly discover, learn and implement new things, just to mess with the newbies and give them even more to study. Well, even though this isn’t far from the truth (:evil_laugh:), we are not doing this to make things harder, but–on the contrary–we are just trying to make them (way) easier. Let’s look at a very easy-to-follow example.

To create a block filled with a gradient, using images, you’d have to create a image at a specific height, the height of the block, and apply it using CSS’ background-image property. Nothing hard doing that, at first sight, but there are a couple disadvantages to doing that.

  • The web page’s load time increases: There is an image to load as a separate resource;
  • Efficiency issue: If you want to modify the gradient to fit a bigger height, for example, you’d have to get back to the graphics editor and redraw it from scratch;
  • Mobile issues: There are a variaty of smartphones, tablets, ebook readers and whatnot out there, and you simply cannot draw an image for each one of them if you need to create a web page that needs to be the same on each of them, especially when you use multiple images.

Here’s where CSS 3 comes in handy:

  1. There are no images to be loaded by using pure CSS;
  2. The effect is resized automatically to the size of the container;
  3. And CSS effects are based on mathematical computations, so everything looks smooth in every single browser that supports an implementation of CSS 3, which, for mobile devices nowadays, this is not an issue.

There are also those layouts that rely on a full sized background image. Here you cannot use CSS 3 to solve your problem, instead, you can ignore it completely.

The flat era

Here we a see another new concept of design: flat design. Flat design, basically means designing with no gradients or other types of background images. The design is based solely on the colour pallete and the user experience (UX).

I kept mentioning the page loading factor and you might wonder why is this and issue today, when everybody has way faster Internet connections than they had in the 1990s. Well, on a desktop computer or laptop, sure, this might be the case, but on mobile devices, this is an issue when thinking about the fact that you pay how much you use and it would certainly be better if you used less Internet data, wouldn’t it?


Even though I’ve made this post look like a rant, I’m not trying to make you learn something just because. This is the future, you will have to learn it even if you don’t want right now. I’m just saying, there’s no way you won’t have to learn CSS 3 in the near future.

No responses so far Leave yours


{ navigation }