Herself’s Webtools

I’ve been learning a bit about images. I hadn’t realized so many of mine were so large! Even though most everyone has high speed connections at home now, most of use are beginning to use the web from our phones and other mobile devices. Here’s some things I learned to help with image sizes and speeding up downloads.

GIMP is a free photo editing tool for all platforms. You are going to need it unless you are already using photoshop or a similar tool.

Never work on your original image. Make a copy and work on the copy. Some image formats are lossy ( they lose image information ). If you change your mind you may not be able to return to the original quality, unless you’ve saved the original and are working on a copy.

1. Put in width=xxx height=xxx in your image tag. This allows the browser to fill in text while the image downloads, rather than afterwards.
2. Only use as large of an image size as you need. If you are displaying a 320×240 image then that is all you should have on the webserver. Do not upload a large image and let the browser shrink it.
3. Jpegs are usually much smaller than gifs. So unless you need a clear background or animation try using jpeg.
4. Check different sizes for different formats. Save your image as a jpeg, gif and png and see which size is least. Use the quality setting in the jpeg tool. Reducing quality reduces size. Experiment.
5. One way to trim images is to save it as a gif and reduce the colors from 256, to 127, to 63, to 31. Look at each image in your browser and pick the lowest size one that is still of decent quality.
6. Now resave that as a jpeg.
7. I had some images reduce by as much as 90%! with little to no loss of quality to the eye.
8. Reducing size helps of course, but color reducing seems to give a much better payoff.
9. There are sites on the web that will reduce your image size for you, but I prefer to tweak them myself.

Image Types:

Jpeg is lossy but allows for the most compression, good for digital photos you’ll display online,
jpegs do not handle line drawings as well as the other formats.

Gif allows transparency and animation, reduces smaller for gray scale images or color with less than 256 colors.

Png allows transparency and does the best job of handling text, use this if your image has lots of text

Tips:

Jpeg is a lossy format, everytime you save an image you lose some of the data. Use jpeg only as a final format, not a working format.

Another tip to remember when you are designing your web site, it to put all your images in one directory. Reuse images where ever possible. The person viewing your page will only have to download the image once, and it will be drawn from their cache the rest of the time.

Download Times

Add up all the images on your page to get the estimated time for someone to load your page. 40% - 50% of your viewers are gone after 6 seconds if your page has not loaded.

Test your site’s speed iWebtools Speed Test

See also:
Gimp Basics: Beginning