Have you noticed any of your images taking a long time to load, like the one below – Maybe a thumbnail on a homepage spotlight?
It takes a long time to load because it's huge. It's a full-resolution file from a digital camera – it's 3648 x 2736 pixels and 2.5 MB! It only looks small because the HTML markup tells your browser to scale it down to 80 x 60 pixels. In order to do that, your browser needs to download the entire file and then do all the calculations necessary to reduce the number of visible pixels.
That's a lot of work, and a lot of network bandwidth. The image loads visibly slowly over a broadband connection. Imagine how long it will take for someone browsing on a 2G or 3G cellular network with a smartphone. Not good.
To fix it, you need to make a lower-resolution (resampled) version that only has the pixels you need (80 x 60) and use the resample image instead. If you have Photoshop or some other image editing package, then you can use that tool. There are also free photo-editing websites that you could use.
The rule of "thumb"
If the hi-res version is on engineering's Zope web cluster, there's an even easier way to get your thumbnail image:
- Right-click on the image and copy the image's location, then paste that URL into the location line of your browser and go there. (Alternatively, just right-click the image and view it.)
- In the case of our sample photo, the URL would be:
https://engineering.purdue.edu/Intranet/Groups/Committees/EWAG/WebDesignNotes/MakingThumbnailImages/SDC10053.JPG
- Now just add /thumb?width=80 to the end of the URL and go, like so:
https://engineering.purdue.edu/Intranet/Groups/Committees/EWAG/WebDesignNotes/MakingThumbnailImages/SDC10053.JPG/thumb?width=80
- Right-click the resulting image, save it to your computer, then upload and use that file. All done!
Here's a truly thumbnail-sized image that's been properly resampled this way:
If you reload the page, you'll notice that it appears almost instantly, and is entirely on the page long before the image above has loaded.
"thumb" is a method that's available on any image on our Zope cluster. It takes either a width or a height, and scales the image to fit into a square of that size. The server, not your browser, does all the work to scale the image down, and only the small, resampled image is sent over the network. When you save the image to your computer, you're not saving the entire image, only the resampled version.
You can also use this trick to make medium-sized images for use within a web page – images in the 300-800 pixel range. Here's what "/thumb?width=300" would give you:
...but not on the Intranet
My instructions above would be correct if the image was on the public web sites, but since it's on the intranet, they actually wouldn't work properly.
That's because Intranet Images are actually collections of Zope Image objects. They're like a folder that contains the full-resolution image (renamed with some randomly-generated Id like 1258489918), a mid-sized image named preview, and a thumbnail-sized image named thumb. The preview and thumb are automatically created when you upload the image. The preview is resampled to fit in a 300x300 square, and the thumb to a 80x80 square.
What this means is that if you add /thumb?width=200 to the end of your image's URL, it just returns the pre-rendered thumb image instead of invoking the thumb script and passing it the width you're asking for.
If you wanted something between the 300x300 and 80x80 size, then you could add something like this to the image URL: /preview/thumb?width=200. That would give you this:
Getting a size that's bigger than 300 pixels, however, isn't going to work. You can't do it with preview because the thumb method won't scale an image to something larger than the actual pixel dimensions of the original image. If it did, you'd start seeing all sorts of horrible artifacts in the image, so it doesn't allow it.
You also can't do it by calling thumb on the full-sized image, because you don't know what the randomly-generated image name is. You just can't use thumb for much of anything on the Intranet.
"resize" it
I was going to end the discussion of the Intranet side of life with that depressing note, but I decided I should do a bit better than that. A few minutes of scripting, and we now have a new method that can be used on Intranet Image objects: resize.
You can use resize on Intranet images the same way you'd use thumb on images within the public sites. Just add /resize?width=400 (or height), and you'll get a nicely resampled image back which you can then save and re-upload:
You're welcome. Hold the applause – just buy me a beer the next time you see me at 9IB.
Best practices for Spotlights and other Event Documents
- Never just add or place a hi-res image in your document. Always make a thumbnail that is the actual size you need, and check the "Use as thumbnail" option. All other images in the document should not be checked as thumbnails, unless you are intentionally adding multiple thumbnails.
- Never place a hi-res image into the body of the document, or check the "Display when viewing" option. Always sample them down to a web-friendly size first.
- If you want to make the full-resolution version available to your readers, add it to the document, but don't place it in the body or check the display box. Place a medium-resolution version on the page and then link it to the hi-res.
-Hilary Mark Nelson, hmnelson@purdue.edu
