Website Speed

Before you start exporting images, you should familiarize yourself with some of the important issues relevant to using graphics on the Web, such as file size, file types, and image optimization. Many of the avail­able graphics tools will do this optimization for you, but to make good choices that best suit your situation, you should understand the how and why of optimization.

Graphics optimization is the process of reducing the file size of images used on web pages, while preserving the quality and clarity of those images. This process provides a few key benefits:

• Smaller images are friendlier to your end users. People will be able to download the web page faster if you’ve opti­mized your images.

• Your website will appear faster to them, and they will be less frustrated than if they had to wait thirty seconds for all your huge, unoptimized images to appear.

• Smaller images are more bandwidth-friendly. Web hosts usually limit how much data your website can serve per month. If your images are smaller, you won’t hit your quota as fast. Some providers will even charge fees when you exceed your limit. Commercial organi­zations that host their own websites also pay a bandwidth fee. It might seem trivial, but the savings will add up if you get a signifi­cant amount of unique visitors to your site.

• Smaller images take up less space. Sure, we’ve all heard the argument that disk space is cheap, but disk space is even cheaper if you don’t have to buy as many disks to store all your huge images. Amazon’s S3 service charges for both the space used by your files and your bandwidth. It’s in your best interests to keep the image sizes small so you pay less for storage and data transfer.

Download Times

Even though many people have fast Internet connections, you still need to think about download times for your assets. A 100KB JPEG might appear small, but add in five of them, the 122KB Prototype JavaScript library, several CSS files, and several other assets, and it can take a few seconds or more for those images to download.

Users tend to be incredibly impatient, and you want to do everything you can to make your pages load as quickly as possible.

You can use various methods to calculate the total size of a page. Adding up the file size of your page, scripts, style sheets, and images using a calculator is one way. Another, more accurate way is to let an outside service do it for you.

Visit Website optimization service here , and enter the address of your site to see a detailed report.

Dealing with Different Graphics Formats

Optimizing images can be difficult because you need to consider the type of image you’re working on.

For example, photographs need to be optimized differently than charts or logos.

When you work in a web browser, you work primarily with three graph­ics formats: GIFs, PNGs, and JPEGs. We’re using each of these for­mats in our site.

GIFs

GIF, short for Graphics Interchange Format, is a graphics format that uses a palette of up to 256 distinct colors from the 24-bit RGB color space. You don’t use it for photographs because of this limited-color space, but it’s great for logos. The GIF format also supports animations.

Historically, GIFs have often been used for logos and buttons because they support transparency, which means you can place a GIF on the page and see the background through parts of the logo. However, devel­opers are increasingly adopting PNGs because of that format’s superior transparency support.

PNGs

PNG, short for Portable Network Graphics, is a bitmap image format that uses lossless compression and was designed to replace the GIF format. It supports only RGB colors, and it’s designed for use on the Web.

It also supports transparency quite well. Unfortunately, this transparency is supported only in newer browsers, but don’t be afraid to use it because the image quality can be amazing.

Be sure to watch your file sizes when using PNGs; a 24-bit PNG with transparency can be quite large.

Don’t Recompress a JPEG!

You should avoid recompressing a JPEG whenever possible. If you’ve compressed the original image by 20% and still haven’t gotten the file size you wanted, don’t compress the new image further; instead, compress the original file again. It’s important to keep your original files uncompressed, so you can go back and re-create them.

JPEGs

JPEG is a compression format for photographic images. It’s widely sup­ported, but it uses a lossy compression, so artifacts can be created if you compress too much or recompress multiple times.

JPEGs do not support transparency at all, and you should use them only for photographs. Logos, screenshots, and gradients are definitely not appropriate uses for JPEGs.

What are the methods you’re using to speed up your website? Do you compress images?

Let me know if you find this article useful.