Hi Guys!

I am after some advice on how to reduce page load time in relation to images.

1. Is there an average background image size (dimensions) that I can use a template for my site? I have a fairly large background image that may not need to be as big as it is...

2. What is the standard procedure to otimizing images to decrease page load times? So far I know to:

- save as png with no transparency
- crop as much blank space away from images
- Use this tool: www.webresizer.com/

3. What is this talk about alt tags for images?

Thanks in advance for your help! :)

Good question. Generally I recomemnd against large background image for just this reason. Some great designs have a 1px x 1px background image but any larger than that is difficult. Can you tell is more?

Yes, that's all good advice for .pngs, although often a .png is chosen because it does transparency well and can easily work on colored background.

.jpgs are at least as popular and they have their own set of optimization needs.

It provides information about the image to two types of visitor who can't see images:
1) search engines
2) partially-sighted people

It's good to be nice to both groups and add an alt tag.

Thanks Steve!

1. My background image doesnt really need to align up to the other graphics on my site, so I guess I could just use the largest screen size, and optimize it that way?

2. How do you add an alt tag to images?

Thanks again!

Hi
If you are using the JCE editor then when you click on image and the popup image editor appears you will see where you can add the alt and title tags.
In older browsers the alt tag appeared when you moused over an image. It is good for SEO and also complies with readability issues so should be descriptive. In most modern browsers it is the "title" tag that appears when you mouse over an image.
In html terms the statement will look something like this.
<img src="images/picture.jpg" alt="some_text" title="My Picture" />
(I have left our tags relating to image size etc also the alt and title tags could appear in any order and between the "img" and "src" tags).
The number of images is also a factor when considering loading times. Some templates are made up from several images others just use css to define borders etc. Times are changing very rapidly a few years ago it was recommended to only have 3 or 4 images of about 300px wide on a page! A large single background image is going to slow things down a little because it probably needs to be at least 2000px wide; even so you might be surprised by how low you can reduce the resolution and still get a reasonable image.
Regards

You guys are awesome, thanks so much Mark! :)

Hi Bugger101,

Mark and Steve are indeed awesome. I agree. On behalf of Mark and Steve, you're welcome and glad you're a part of our community.

Cheers,
Ed