Image File Sizes

What file sizes are acceptable?

[Vicki]

Hi, there - I'm new. I used to work with someone who was a stickler for keeping image file sizes as small as possible. I agree it's a good idea, but I'm wondering what file sizes are okay now-a-days.

I'm working on a webpage customers will access through a link in an email. Without the animation, the image is 15 kb, which is great! Adding the animation causes the image to balloon to 40-50 kb.

Is 50 kb an acceptable file size for most people? I usually shy away from an image that large, but the animation really jazzes up the page.

Thanks!

[Vicki]

I should add that the customers will be from Australia, Argentina, Uruguay, and the UK. I don't know what type of Internet connections people have in other parts of the world (I'm in the US). If you have any insight on that, I'd love to hear it! Thanks.

[Ryan8720]

For a main image, I consider 25KB to be the max. I aim to get my main images to between 10 and 15KB. I would say 50KB is too much. It is very annoying to people on 56K or below connections to have to download something that big, just for cosmetic effect. You may want to consider making this animation a SWF movie. They can be compressed much better than an animated GIF, MNG, or AVI.

In UK they have basically the same connection as we do in the US, a mixture of broadband and 56K, plus a few 36.6K.

[too much information]

Hey Vicki, welcome to Webmaster World!

I have worked on some image heavy sites and I feel like I'm pushing it at 20kb but it's a quality issue for the company.

My trick is to use the lowsrc= in the <img> tag. (for example: <img src="large_image.gif" lowsrc="small_image.gif"> This way it gives your viewers something quickly, usually a very small greyscale image so that they can move on. Then if they wait long enough the image will switch to color as it loads which is kinda neat.

I'm not sure how this would work for an animated gif, but I would think that if it is interlaced it might be pretty cool.

I don't think the 'lowsrc' is very popular anymore because of the increase in modem speads and high-speed internet, but I still use it just in case. Besides, people know when they have a slow connection, so they are usually not surprised when things bog down a bit.

[krieves]

With the growing popularity of broadband connections in the US, image size isn't as crucial as it once was. However, you should always err on the side of using smaller image files. Especially if you are building a site that will be viewed in nations where 36.6 modems are still popular.

Depending on the site design, it's sometimes possible to combine HTML/CSS elements with images to them look more robust with using large images or significantly sacreficing image quality.

In addition, you can save room for borders or margins (that would normally contain a large image) by using a well constructed image as a repeating background for a cell, thereby giving the impression of a larger image.

[ILLstyle]

I feel it is always good to go a low as you can with out loosing too much quality under 10k for a big ones and under 2k for thumbs. I use jpg for pictures and graphics with a lot of colors or fads, but I always will use a gif on graphics that use less colors.

[mattur]

As others have said, generally you will want to keep the entire page as small as possible. Be aware that some folks find looping animations somewhat annoying :)

A 50kb file will take about 10 secs to download with a 56k modem. You should ensure your page renders correctly without the image being downloaded by setting the height and width. That way, visitors can start reading the page while waiting for the image to appear.

Many web editors (eg Homesite) include a download time calculator that can give you a total page weight and an indication of download time at different connection speeds. HTH!

[Vicki]

Thanks, everyone. The information has been great! I'll look into the different things recommended for future projects.

For this particular project, I decided to recommend against the animation. I don't think the snazzy look added enough value to make it worth the risk of annoying customers. It still looks good without the animation.

Thanks again! I'm already glad I joined the forum.