Jump to content

Image Based Sites And Performance.


shadowayex
 Share

Recommended Posts

I'm trying to build a site that uses a lot of images. The problem I'm having is that loading time is exceptionally slow, even on awesome connections.I've seen sites use a lot of images for navigations, backgrounds, and all over their site, but they don't seem to have the performance problem I do.Is there some special trick I don't know about?

Link to comment
Share on other sites

Gotta be image size. Photoshop has a "save for web" option where you can try out a number of saving options. You can see the effect of different forms of optimization on appearance. Remember that jpgs look best for images (like photos) that have no sharp contrasts. The more you optimaize a jpg, the more you introduce artifacts. Cartoons and images where text needs to look sharp tend to work better as gifs and pngs. Optimizing increases the cartoonish feel (fewer colors), but if there aren't many colors to work with anyway, this might not be a problem.In general, avoid text that overlays a photo. It combines problems and requires hi-def jpg to look nice. Better to have an optimized jpg as one image, and then use CSS to overlay a separate png that contains text on a transparent background.

Link to comment
Share on other sites

Well, the images in question right now have an average size of 20kb for most of them. We do have a logo that is 178kb.Also, it's worth noting that we have anywhere between 6 and 20 images of the 20kb size being loaded upon first call to them, and then the logo loaded once as well.All images are .png images.Are those images too big? I can talk to my designer and see about lowering their resolution maybe. I'm not too familiar with imaging and everything. I do the programming and put the layout in place, and my designer makes all the pretties and tells me where they should go :)

Link to comment
Share on other sites

Alright, here's what I was able to do.For some odd reason, opening the images in GIMP and just saving them dropped each image size to an average of 7kb, and the logo down to 49kb. The images were originally created in Photoshop, so that may be why.Performance has increased quite a bit. I can't tell a noticeable difference here (as I'm loading on the same network as the test server), but testers have reported anywhere between 30% - 60% faster loading time.My clocks here dropped the loading of each image from 7 - 8 ms to 3 - 4 ms. So far so good.Thanks for the info from both of you. I'm learning how to optimize loading and use the tools available to really put my stuff to the test.Thank you both and I'll continue to do more testing using what information you both have provided.Edit: Clarification.

Edited by ragae
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...