The Design Aspect

I always tell myself and people who design for me to not worry about the design. I can always code it and optimize it for the web. Although this maybe true I don't always design with that mentality. I usually keep the user of the website in mind. I never try to overkill the design just because I want to, but this is coming from a developer's thoughts.

Regardless, if you are one who is highly concerned about the graphical load time then design with that in mind. You can cut down on size by using design elements that you know can be replaced by CSS 2.0 standard coding. So we're talking about solid boxes, solid lines and etc. We'll go further into that in the CSS section. Using heavy graphics and lots of blending will add up in size. Something like that looks like Crankberry will cost you around 700 KB in image size with the whole page loading around 1 MB. I cater to designers and developers so fairly average for today's standard.

With that, keep those thoughts in mind when designing because if you design first then noticed that the site bogs down then you'll be going back many steps just to make revisions to that.

Keeping the Balance

As mentioned in the beginning of the article that there are many things that dampens the load time of your site. The way your content is drawn onto the pages is also a factor that may affect the speed. Static contents won't pull you down much unless you're uploading novels and encylclopedias on one page but then you have other problems to worry about don't you. Anyways, if your website pulls a lot of content from your database per page with lots of joins and queries then your content is also factored in. In these scenarios I usually recommend keeping a balance to mitigate high load times. So if you have a lot of heavy database interaction I would recommend keeping the design and graphics to a lower end. On the contrary if you don't have a lot of database interaction I may not recommend super heavy design just means that you're more flexible. Refer back to the last section as to how to optimize your design.

JPEG vs GIF vs PNG

Now that you're done your designing its time to slice the images up and start structuring your HTML and CSS. When saving your image files you have so many options as to which file format to save it as. You've got JPEG, GIF, PNG, Bitmap, TIFF and the list goes on and on. Just to shorten your list down, I would stick to three primary formats: JPEG, GIF, and PNG. All the other formats for development wise can be forgotten. Now some people like to consistenty use one format throughout their whole website but I like to switch it up. I prefer to use JPEG, GIF and sometimes PNG. I'll go into further details about which I use and when I use it in a bit. First of all you should understand the difference between all these formats. There has been many articles written over this topic so it would be super redundant to do it again. I'll spare you the theatrics and give you the highlights.

JPEG

• Lossly compression
• Compresses colors and grayscale
• Used for complex images

GIF

• Lossless compression
• 256 Colors
• Good for line and simple drawings
• Supports animation
• Supports transparency

PNG

• Lossless compression
• Patent-free GIF
• Supports transparency with opacity setting

Which to Use

After reading the above part you maybe wondering how this infomation reflects on your files format and which one you should use. Here's how you look at it. Lean towards GIF and JPEG and if necessary then use PNG.

Lets start with why minimal use of PNG. PNG is a nice format format in replacement of GIF. When saving the same simple GIF file in PNG you can end up with a smaller file size as PNG does a better job in compression. The reason I still don't use PNG much is because some of the older, non-main stream and mobile browsers don't have a good support for PNGs. There are ways to go abouts for this but to accomodate for all browsers would be very timely. As I always focus to present a cross-browser compatible website I stay away from this format.

Now then, we're left with the JPEG and the GIF. It is very simple when it comes down to these two contenders. If the image you're saving has lots of colors and blending then go for the JPEG if it has simple lines and text and solid color go for the GIF. Your sizes will optimized this way.

Here I took a screenshot of my currently portfolio (top design) which should most of the images should be saved in JPEG due to the complexity of the images and colors. The second screenshot is of FusedEffects which should mostly be saved in GIF due to the simple lines and large blobs of solid colors.

Good Practice

Obviously if you've got all that down you can quickly decide which format to use and how much compression you may want to do. If you're lazy like myself and you have Photoshop the best thing to do is to use their [Save as for Web] setting. The window it popups up with will give you the image size before you even save it.

This way you can switch between JPEG, GIF, PNG and different settings until you get the quality and size that pleases you.

The Role of CSS

Ok ok ok, I mentioned a few times (at least I think) that you can replace certain elements with CSS to eliminate the use of graphics where necessary. I always prefer this method when possible as I tend to think a few lines of code is always smaller than an image size.

Now a days, developers have come up with many creative ways to achieve graphical effects with just a few lines of coding. Such as rounded corners. The trend right now seems to be using rounded corner boxes instead of plain old square. Since CSS 2.0 has no support for rounded corners on div tags people rely on images and positioning. As I have released months ago a script that is purely css, cross-browser compatible and image-less for rounded corners.

That's only one of the many examples in which graphical elements can be replaced by CSS coding. I will be doing a full article on this in the near future so stay tuned for that.

If You Can't Replace The Image, Work With It

In certain cases some pure CSS solutions aren't as stable yet such as gradient effects you can combine images with CSS to create the effect. So for a full stretch gradient instead of making an image 5000px x 10px just save it as 1px x 10px and use the background: repeat-x; This will save you lots.

In summary, how much can you save by going through so much optimization. This really depends on how heavily you designed your site. As you can tell by my style I like to go heavy with personal designs and light on business designs. Sometimes its not up to you. I work with a designer who over does gradients and shadows everywhere so its up to me to optimized the images. Sometimes I can save up to 500+ KB by doing the right optimization. You maybe thinking that with the advancement of cable internet and the cost of bandwidth going down it doesn't really matter. Remember its all about the user experience. There are lots of factors involved that contibutes to your site's load time, try to optimized everything so there's is minimal lag time. You should also understand that with the advancement of technology more and more people are surfing with their mobile phones or laptops tethered through their mobile phones. Its always a plus for your users when they get the things they're looking for, faster.