Images.... Some things to pay attention to!

A picture tells more than a thousand words! So does bandwidth!

Hi everyone,

Today I would like to share some things to pay attention to when working with images on your website.

Size does matter!
Well that maybe be true but that doesn't make up for the extra bandwidth you are using if your not showing it. What I mean with this, is that people pretty often adjust the size of the image in the browser instead of adjusting it in advance in a photo editor. This causes extra wasted bandwidth, and  besides that the results are often ugly rendered photo's. So if you need an image of 150x75 pixels, re-size it before you upload it.
If your not familiar with image editing software, maybe try out an online tool like: picresize

Optimize the images you use!
Now you might think your images are ready after your re-sized them, but your not if you're greedy for more speed, and less bandwidth. There is a great tool that is able to optimize your images without loosing any visual quality. It's called smush.it! Try it out and see that quite often it easily reduces your file size with 10 percent or more.

Combine your images!
Do you have a lot of static images, like buttons, headers, separators, symbols, logo's and alike? Combine them by using a sprite. Using sprites is a great way to minimize the amount of header request which could really slow down your website. Some examples of sprites can be found here.

Don't forget the alt="" tag!

<img src="../folder/for/images/monkeys.jpg" alt="monkey eating a banana"/>

Although you don't need to put any text in it, it can be very useful for SEO purposes.

Don't forget the space after the background url!
Now this sound pretty cryptic, but what I mean is that when you are setting a background image in css you need to add a space after the url() If you don't this, it could cause some browsers to screw up, by not showing your background image and those errors are very hard to find because most editors will not notice it, and it is not considered invalid.

So instead of this:
#element{

   background: #fff url(../images/image.jpg)no-repeat top left;

}

it should look like this:

#element{

   background: #fff url(../images/image.jpg) no-repeat top left;

}

Notice the space between the ) and no-repeat.

Hope these things will help you guys out when working with images in your design.
Wish you happy coding and as always, feel free to leave a comment.


Cssfreakie