Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Why use CSS3 and not images?

Hey guys, I'm just wondering, has anyone stumbled across any research showing that using CSS3 for styling (Fradients, strokes, shadows, perhaps using icon fonts) actually increases performance over using plain ol' slices?

I'm really interested, so if anyone doesn't come up with any research I hope to conduct one of my own.

What do you think would be good ways to test this theory?

10 Answers

James Barnett
James Barnett
39,199 Points

I would think that using a lot of images would create a lot of connections which add all of the "connection time". Also I imagine that the file size of a CSS file from the amount of text it takes to create those effects is significantly less than the file size of an image.

How to test it, easy use pingdom

Jeremy Hilder
PLUS
Jeremy Hilder
Courses Plus Student 9,084 Points
Jeremy Hilder
Jeremy Hilder
Courses Plus Student 9,084 Points

I have not seen any direct comparisons but I think the key issue is to Reduce network requests and save bandwidth to mobile devices.

So to that end how about comparing page weight & HTTP requests.

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Hey guys,

So James, that's exactly what I imagine, I just want to prove it :) Not to mention the time you save when working on your code, especially when modifying elements (hover, focus etc...).

I had no idea Pingdom offers any information besides loading time! (Of course it makes a lot of sense they do).

Thanks guys, I'll let you know if I ever run the test.

Kenneth John Balgos
Kenneth John Balgos
657 Points
Kenneth John Balgos
Kenneth John Balgos
657 Points

For me, designing with CSS greatly improves the loading of the website. Imagine the difference of 10Kb CSS file from 100+Kb image files :)

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

I've found they load a lot faster when using CSS compared to using image slicing. More importantly, to me and a lot of developers in any case is the fact you can change the code any time where as with images you have to re-create a new image every time. What happens if you don't remember the font you used, or a specific gradient effect? :)

Kenneth John Balgos
Kenneth John Balgos
657 Points
Kenneth John Balgos
Kenneth John Balgos
657 Points

I agree with Vaughan. I was using images when I was in high-school and I really had difficulties updating the context because I lost the pdf file the images are flattened :)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

All great points. On large-scale sites/apps, it absolutely improves front-end performance. And like Nir mentioned, it's more efficient for us designers and developers to build and maintain this way. If you need to embed images, I suggest looking into progressive jpegs.

Brandon Escalante
Brandon Escalante
5,772 Points
Brandon Escalante
Brandon Escalante
5,772 Points

Also, I find it's just plain ol' good practice, to use as little images and achieve your sites aesthetics with CSS as far as you can get it, imo. It helps your problem solving if you're newer, down the road.

For example - using css borders instead of images, rounding corners instead of doing that in an image editor, etc...

There's so much you can do with CSS, and images are just sprinkles on a CSS Frosted HTML cake.

But we all know cupcakes are better. Who wants to go grab a few from Smells Like Bakin' Bakery!?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Brandon - Don't you mean that, images are just sprinkles on a CSS Frosted HTML cupcake.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Nir - Pingdom Tools have all kinds of features, from their site:

View file sizes, load times, and other details about every single element of a web page (HTML, JavaScript and CSS files, images, etc.). You can sort and filter this list in different ways to identify performance bottlenecks.