Thanks for reading and please give me any advice you have:
I just completed this website studioeaglearchitecture.com, the images on the right are large and take a few seconds to load, but I can see it loading in parts (which does not look attractive).
Some people with slow speed connection have not been able to go through some sideshows because of the size of the images in it, which makes the slideshow to stop at some point.
I want to reduce loading time without sacrificing quality of image. Most of them are now JPGs and 1200x800px or so. I manage to reduce a few to 600x400px and make them GIFs. I’m using Adobe Photoshop Elements. Is this a good technique? Is Photoshop Elements good?
I came across something online about using a javascript image loader, but where can I use it? Homepage? If I do so, is it going to slow down this page’s loading time?
Thanks
Choosing the right file format (.jpg Vs .png 8 /24 Vs .gif) is primordial to have a lighter image with better quality in the same time! search the forums about this!
I’d spend some time learning about how to optimise images for the web so you absolutely nail a good understanding on this subject.
I’m assuming that people will be commenting on the Slideshow pages rather than those that have the pop up greybox/whitebox image display. Basically you need to optimise the images for the size that the slideshow is going to display. Your images all contain more detail than the size that they are displaying in the slide show. eg: http://www.studioeaglearchitecture.com/web/healthcare/maryland.html
You can see in the image below that the image is scaling to the display. All that extra information is wasted it would be better to scale your images to the size of the slide show so they display at 100%. This will reduce both file sizes and loading times. Also make sure your images are optimised for display on the web, I’m not familiar with Elements but Photoshop allows you to “Save for Web” and that basically cuts out all the extra information that isn’t needed for display on websites.
I’m sure others will chime in with good advice and links.
The size of the image is very important - don’t save larger image than you will display (if you show 800x600, don’t save them as 1200x1024 for example, as you will waste a lot of space).
JPG is usually for photographs, and will lose some quality (but often not visible to the human eye). PNG is lossless and is better for “graphics” (like a web page with lots of white space).
Also, when you save a JPG you can select the compression quality, and this can reduce the size significantly (for example saving JPG with 80% quality instead of 90%). If you reduce the quality too much, your images will suffer, so you need to experiment with different quality for the same image, and see for yourself. You change the compression quality in your image editor, usually at the point where you save the image.
Though it’s also important that you do some tweaking in the image editor to remove excess weight from the images (like oversizing, too many colors than are needed and low compression). There’s loads of good articles on the web about compression, and it’s worth doing for the bandwidth savings and speed boost!
If you’re finding all the info hard to take in then resizing the image to the actual size you are using is a good start. There is a lot of info on image optimisation as with limited bandwidth/dial up it made a really big difference in loading times of a page - the difference between people sticking around or getting annoyed and leaving. Depending on the area and availability of broadband this isn’t as much of an issue, it becomes more about streamlining and not cluttering a website with unnecessary information. It is always a good principle to be as lean as you can without sacrificing quality.
Image formats have changed over the years as the internet browsers ability to use them has progressed. But bread and butter have always been GIF, JPG and now PNG. For gallery images like you are using I’d stick with JPG and come back and revisit the issue when you have the time & energy. As I said I’ve not used Elements but if it is anything like Photoshop’s Save to Web then you will be able to preview the images before they save. Eyeball them and make sure you are happy with the quality, if you are in a broadband saturated area it won’t be the end of the world if they’re a little on the large side (file size wise).
Feel free to drop in and ask more questions if you need to.
yes its a big problem for every image or photo blog site the greater the size of image the greater time the site will take to load it .Try to use smaller image but not use greater then 2.5 mb.
With so many image optimisation tools and web galleries around, there is really no need to have a very large image displaying and taking a long time to download.
A dual-monitor high quality desktop picture can be saved to a little over 1MB and still look stunning. Most images displaying on websites are much less than that and accordingly shouldn’t take forever to load.
I did keep them all as JPGs, and the site is loading much faster than it use to.
Is there any book you’d recommend on this subject? I know the web has a lot of info, but I prefer a good slow-paced guide through the principles, definitions, and all that involves graphics and the web. There are a lot of things out there, but sometimes I’ve been disappointed. Thanks.
Thanks for that. I am using photoshop elements, now my knowledge in graphics is very small so, what I did was reduce the size to fit the area its filling (using the tool the Slackr pointed up). I also saved them all as JPGs because I notice that from GIF to JPG there was a big decrease in the file size when saved as JPGs. I don’t know how correct this can be, originaly this images where saved as PDFs, I guess that has something to do with this. If you have any other comments they are a big help. Thanks.
