I recently registered for my first sprint triathlon, the Hawk Island Triathalon. While visiting their site I was surprised to see how they displayed images.
It is a colorful, informative, and photo-filled site however I would like to point out one no-no. First, go to the page linked above. Notice how the site loads quickly, including the slideshow at the top except for the six photos in the middle. These six photos will take a while to download.
Even though the photos on the page are only displayed at about 150 pixels across, the full resolution image (1200 by 900 pixels) needs to download. The page creator should have made thumbnails that size for each photo and used that on the page. If they desired to have the full resolution available, then each photo should be a thumbnail with a link to the full photo. Not only will the page load dramatically faster, but will save the extra load on the server.
I better get back to training!
Comments
It surprises me how often webpage designers/programmers do this. With super-fast internet connections and/or ridiculously high bandwidth, maybe they don't even notice. ...Though it comes in handy if you'd like a copy of the little picture and then discover after saving it that it's at a high quality resolution!
Very good advice. With free image editing software such as PhotoScape, you can resize multiple images very efficiently.
I use a free program called Picasa. This allows you to download and share photos very easily when you install their software. It is available at Google.com, photos. When you upload photos they are lower resolution, but you can click on them and get higher resolution. We use this a lot for sharing family pics. Yahoo has a similar program called Flickr.
Another great part about Picasa is that it is quite cheap to backup all your high-res photos online using Picasa Web Albums. You just sync your local version of Picasa with your online account. I love not having to mess with DVDs anymore for offsite backup.
I forgot to mention also that if you're going to resize a photo to be displayed on your website make sure you make a copy and don't resize the original.
Ohh, and I love Flickr! Especially now that I have a gps and I am geotagging my photos.
One more tip: use 72 dpi resolution for web display. For printing, link to the high-resolution version at 300 dpi.
[quote=al.kuiper]One more tip: use 72 dpi resolution for web display. For printing, link to the high-resolution version at 300 dpi.[/quote] Actually, you can set your mind at ease about this one! When creating web images, DPI doesn't really matter as there is no such thing as an "inch." A pixel will be different sizes on different monitors and browsers don't account for that when displaying images. So if your thumbnail is 150x150, it will always display at that size regardless of the DPI setting.
Let's Discuss
We love your comments! Thank you for helping us uphold the Community Guidelines to make this an encouraging and respectful community for everyone.