shadowayex Posted November 16, 2009 Share Posted November 16, 2009 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 More sharing options...
jeffman Posted November 16, 2009 Share Posted November 16, 2009 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 More sharing options...
shadowayex Posted November 16, 2009 Author Share Posted November 16, 2009 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 More sharing options...
jeffman Posted November 16, 2009 Share Posted November 16, 2009 178kb is BIG. Just for an experiment, try the page with that image commented out. See how fast it loads. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 16, 2009 Share Posted November 16, 2009 Load the page in Firebug, on the bottom of the Net tab you'll see the total size of everything on the page, plus the individual size for each thing, and the amount of time each request took. You may want to empty your cache before checking that. Link to comment Share on other sites More sharing options...
shadowayex Posted November 16, 2009 Author Share Posted November 16, 2009 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.