PDA

View Full Version : 10 Quick steps to make your site load faster - GFX related



mdshare
09-20-2008, 04:12 PM
1. Use Height and Width (Size) Attributes.

Example: width="144" height="259"

Every time a browser loads a webpage it looks for the the height and width attributes (size) of each image in your html code so it knows how to lay out the text and the graphics on that page.

This all takes place instantly behind the scenes. When the proper attributes are used, the browser loads the text before the graphics. This is good. It's faster this way.

If you don't use the attributes, it causes a delay waiting for the browser to download the images first and then lay out the text. The browser has to play catchup. It can't load text onto the screen until it has figured out the exact size of the graphics.

Make sure to use attributes on all your graphics, even those little tiny ones, like buttons and bullets.

2. Size Your Image Correctly

Lets say you're trying to place an image with a file size of 30k and height & width attributes of 300 pixels wide by 400 pixels high in a spot on your webpage that is designed to hold an image sized at 200 pixels wide by 300 pixels high.

To accomplish this you've changed the height & width attributes in your html code to 200 x 300.

You may think that since the image will be displayed at the lower size (200x300), the file size will be smaller and the image will load faster.

Not true. Regardless of what size attributes you use, that file size is still 30k and it will load at the same speed any other 30k image does.

Use an image editor to change the size of the image to the correct dimensions first. Then use the correct size attributes in your html. By resizing the image before you plug it into your html code, the file size will be smaller and the browser will load it quicker.

3. Animations

Animations are attention getters, but they quickly become annoying. They also slow down the loading of your page.

Limit the number of animated graphics on your page and set your annimation at a specific number of repetitions rather than allowing them to loop endlessly.

4. Use the Correct Image Format

If your image is simple with a small number of colors try converting it to a gif format. Good choices for this are clipart, bullets, buttons, charts and such.

A word to the wise. Not all images are suited for the gif format. Complex images, photos or those with enhancements such as reflections and drop shadows don't display well in this format.

The jpg format is suitable for complex images with lots of color variations. A good example of this is a photograph.

The png format can be used for either. The high end png format (png-24) produces a beautiful transparent image and maintains any enhancements you've included. The file sizes are generally higher so if you're at all concerned about load time, you may not want to consider the png format unless you have the software and skills to slice your images. (See Tip #5)

5. Slice Those Images

Image slicing is a technique used to breakdown a large image into smaller pieces to make it load faster.

I use the image slicer feature in Photoshop but there are also many options available to do this if you don't use Photoshop.

Search for "Image Splitter" - without quotes in your favorite search engine for líst of resources for slicing images.

6. Limit the Number of Graphics you Place on Each Page.

If your pages are loading too slow, consider removing some of the images. Keep only those that absolutely necessary.

7. Use Thumbnails

Use a java script to display a thumbnail and load the larger image only when the reader rolls their mouse over the thumbnail.

I use this technique when I have a lot of images I want to put on one page, but the page would be too big if I included them all at normal size.

I got this script from Dynamic Drive. As long as you keep their copyright notice in the html code you can use their scripts for free.

8. Browser Cache

Graphics and text are stored in what's called cache on your hard drive. This makes it easier and quicker to load files that are displayed in your browser. It loads them from the cache rather than over the net each and every time, if it's available.

To improve your visitors experience, take advantage of their browser cache. The best way to do this is by not putting identical images in more than one folder, subfolder or directory on your server. If the browser always calls the image from the same folder, it loads much quicker.

9. Optimize Your Images

Optimizing your images is a great way to reduce the load time. I generally optimize images I make for my clients to about 60%. I've found this to be the magic number that reduces the file to a reasonable size yet doesn't compromise the quality of the image.

I caution you on optimizing further. Greater percentages of optimization may leave your images blotchy with speckled blocks of color. It will often make your colors look washed-out and you may lose some of the fine details.

10. Progressive Optimization

A sneaky little trick I've learned is to select progressive settings when you're optimizing your images.

This doesn't really make your images load faster, however, they do load first at a very low resolution and continue to load progressively, with more detail, until they are fully loaded.

Your visitor at least has something to view and content to read while the loading process finishes up. This technique works with JPG, JPEG, PNG and GIF 89 file types.

In Conclusion

As we progress into the Internet future there will come a time when our connection speeds are so fast the speed at which webpages load won't be an issue. News information and graphics will flash across your screen at record breaking speeds. We'll get there. Maybe not in the next few years but eventually we will. History has already taught us that the technology is here. It's only a matter of time before we see it.

But until that happens how quickly our webpages load is something we need to take responsibility for.

Author: Graphic Designer Heather Colman helps virtual assistants, coaches, and other professionals online bring visual impact and depth to their products with custom 3d images and website graphics. Visit her site at: CustomDesignGraphics.com .

Floydian
09-20-2008, 07:41 PM
That's good stuff ;)

The only thing I would add to any of that, and perhaps it's a bit too detailed for that list, is on 9. Optimize Your Images.

I've found that whether I'm exporting my image as gif, jpg, or png, posterizing the image usually results in a smaller image.

Gif always indexes an image which is like posterizing because it sets a color pallet for the image, but using the posterizing option first almost always results in a smaller file size for me in almost all images of all formats.

I typically reduce the image to 20 to 50 colors. Posterizing simply limits the total number of colors. In GIMP, you can see the changes to the image as you edit this setting. Higher settings typically don't result in any change to the image. At lower settings, there's a sort of cycle of lighter and darker colors that the image goes through as the setting is changed. I normally get the image to an approximate color of what it was. All the images I've done have this edit applied to them. ;)

YoungGold
10-03-2008, 03:37 PM
i have found that depending on the work .PNG is often more effective and smaller loading times than a .JPG

Dave Macaulay
10-03-2008, 11:43 PM
i have found that depending on the work .PNG is often more effective and smaller loading times than a .JPG


Depends if you use PNG-8 PNG-24 or PNG-32 obviously PNG-8 being the fastest

QiVux
10-04-2008, 08:15 PM
i like to use PNG-24 :-D

Dave Macaulay
10-04-2008, 11:41 PM
Same but then they end up as PNG-8 after the compression.