Images

Image size

Uploading high resolution images is recommended.

When using the new image tags, your image will be automatically resized to deliver the highest quality image while conserving bandwidth to ensure the images load quickly. This means you can safely upload a high resolution image and it will be properly rescaled to the ideal size depending on which tag you use. Uploading a large image may take a few minutes depending on the image size and the speed of your internet connection.

Image type

Only JPG, PNG, and GIF image types are supported.

Photos should be saved in JPG format. Charts, figures and screen captures are generally best when saved in PNG-8 format. GIF should generally be avoided because of poor quality.

Image uploads work very much like file uploads. Once you've uploaded the image using the Upload File/Image button it is assigned a unique id number. You can use this number within an image tag to insert the image into the page. Before putting your image in the page you'll want to think about how much of the page the image should take up and use the appropriate image tag:

  • [fullimage 12]- This tag will display the image at the full width of the main text in the page. This tag is best for images that are wider than they are tall and which are important to show at a large size.
  • [largeimage 12]- This tag will display the image at approximately 2/3 the width of the main text. This size is appropriate for images that are key elements in the page (e.g. a figure or photo that is key to understanding the page) and where a smaller image would hide important details.
  • [narrowimage 12]- This tag will display the image at approximately 1/3 the width of the main text. This size is appropriate for the majority of the images that are used to 'decorate' a page, or where a larger size isn't needed to make relevant details visible.
  • [quarterimage 12]- This size is exactly in between the [thumbimage] and [narrowimage] tag sizes. Its name is deceiving because you cannot fit 4 images across. The final width of the image is slightly more than a 1/4 of the usable page width.
  • [thumbimage 12]- This tag will display a small version of the image.

Captions

When you use the image tags above a caption line will automatically be generated based on the description you provided when you uploaded the file. You can edit this description (and hence the caption) in the update file/image area found through the green sidebar. Captions will automatically contain a summary of the provenance and reuse information you provided when uploading the image. Again, this is editable by following the update link in the green sidebar. If you don't want the description to be automatically displayed below the image you can use the hidecaption option like this: [narrowimage 12 hidecaption]. With this option the caption will only be visible when a user hovers their mouse over the image itself. If you want to provide a caption other than the one in the description (e.g. if a generic description of the image isn't appropriate in a particular context) you can use the caption tag to indicate that the caption text will follow the image tag and its end will be indicated with an [end caption] tag. You'll want your custom caption to include the details about the provenance and reuse of the image which you can have automatically inserted using the [imagecitation 12] tag. Altogether these tags you'll have something like this:

[narrowimage 12 caption] This caption will be displayed instead of the default. [imagecitation 12][end caption]

Alternative Text

It's important to provide a written alternative to each image so that visually impaired users can make effective use of the site. By default the system uses the title/alternative text field information associated with the image for this purpose. However, that may not be appropriate in all circumstances. The alternative text needs to briefly (a few words or a sentence) play the same role in the context of the page as the original image does. You can over-ride the the default alternative text to make more sense in the local context by providing substitute text near the end of the image tag (just before the url if any) surrounded in single quotes: [narrowimage 12 'Graph showing global CO2 rising over the last 200 years'].

WebAIM provides a practical guide to creating appropriate alternative text for your images with many useful examples.

If an image is purely decorative you'll want the system to display an empty alternative text tag, which you can do by putting 'none' as the alternative text: [narrowimage 12 ' none']. If you use the hidecaption option the system will assume the image is decorative and automatically put in an appropriately 'empty' alt tag.   The one exception is if an image is a link (see below) it must have an alt tag that serves to describe where the link points to.  In this case the alt tag should usually be the name of the targeted page and should not include words like 'a link to'.

Thumbnails and Pop-Ups

When you click on the images generated by any of these tags the image itself will pop-up at full-size. In cases where you want a small image to appear in the page but also have the image viewable at a larger size upload a larger image and then use the thumbimage tag. Users clicking on the small image in the page will see the full size image as a pop-up. 

Images as Links

If you do want the image to link to another page, you can include the absolute or relative URL as the last option before the image's closing tag [narrowimage 12 left http://www.google.com].

Automatic page thumbnails for local pages

You can use the the [thumbimage] tag to automatically display the Page Image (see below) associated with a given page. To show the Page Image don't add an image id to the tag and only give the url to the page you want the screenshot: 
[thumbimage /serc/site_guides/projects.html].

Do not use development urls (they start with /dev), only use the live url of the page even if it isn't live yet. The thumbnail for the live page is generated automatically and retrieved when that page is made live.

If you are using a Page Image from a page that exists on a domain other than serc.carleton.edu, you will need to use the whole url (e.g. http://nagt.org/nagt/sections/aboutcen.html).

You can also use the float,noshadow , and noborder options just like on any other [thumbimage tag] but the must be used in that order before the url at the end. The url is always last.

Positioning

It's possible to control the horizontal positioning of the image on the page by specifying left, right or center immediately after the image id number like this: 
[narrowimage 12 right]

Drop Shadow and Border

It's possible to suppress the drop shadow and/or the border that is applied to each image by default using the noshadow and noborderoptions. If both options are used, noshadow must come before noborder.

Slideshow mode

If your page has many related or ordered images, you may wish to turn on slideshow mode so users can easily navigate through all the images on the page without clicking each one individually. To enable slideshare mode, place the slideshow option last on your image tag:

[narrowimage 12 left slideshow]

The slideshow option only needs to be added to one image on the page (it doesn't matter which one). The order of the images is determined from the natural order in the page which is effectively top to bottom. Images that are floated right or center and not cleared with a [br clear] may appear to be out of order due to where web browsers render a floated image relative to other images.

Only the new image tags will be added to the slideshow image rotation. Old image tags and new image tags with URL links at the end will not be included in the slideshow rotation. You can navigate through the images with the buttons at the top of the image or the arrow keys on the keyboard. Images are preloaded to reduce waiting time when moving to a new image.

If you are making photo gallery page with many images, floating all images left will result in a grid-like layout. You can use the thumbimage tag like [thumbimage 12 left slideshow] back to back for all the images. Only one image needs the slideshow tag and then you can easily flip through all images.

Updating Images

The display of images in the sidebar includes a link to an editing page for each image. The editing page has a form for editing image information (like the description) and one for uploading new revisions of the image. This works exactly like file revisions: uploaded revisions replace the existing image across the site, and earlier revision can be saved or discarded as you deem appropriate using the options in the form.

Page Images

Each page in Serckit has an associated image which is used to represent the page in search results and other locations with visual displays. By default this image is just a screen capture of the page itself as it looks in a browser. However, if the system detect the presence of a suitably sized image (at least 150 pixels wide) in the page it will use this image instead of the screen capture. If there are multiple images in a page it will try to use one in the Description block (if there is one) and otherwise default to the largest image in the page. It's also possible to over-ride this automatically selected Page Image using an option in the page metadata.

Image Cropping

When system needs to display an image at an aspect ratio other than the original one (e.g. a page image used in a search return) it will default to cropping and scaling the image evenly from all sides. For some images this may not be ideal if the focal point of the image (e.g. a person) is not in the center of the image. The image updating page provides an interface where you can explicitly select a focal point (e.g. a person's face) and zoom level for the cropped version of the original image. The interface shows 3 example crop ratios to give you a sense of how your focus and zoom selection may play out in different display scenarios.

Creating Images for the Web

While there are entire books written on creating effective web images there are a few key points to keep in mind.

  • The goal is to create the smallest image possible (in terms of file size) while retaining sufficient image quality and height/width to suit your purpose. Smaller images = faster loading web pages.
  • Using the 'Save For Web' option in Photoshop (or similar a similar tool) offers many options for adjusting images toward the goal of small file size with sufficient quality.
  • The most effective way to reduce the file size of your images is to reduce the dimensions (the height and width in pixels). Consider how you're going to use the image (in terms of the various tags above) and use the guidelines above for appropriate widths.
  • Photos should be saved in JPG format.
  • Photos directly off of digital cameras are almost always much too large for use directly in a web page--scaling them down to no more than 950 pixels on a side is appropriate in most cases.
  • JPG images can be saved at a variety of 'quality' levels. The trade off between file size and image quality (fuzziness/blockiness) varies from image to image. So you'll need to experiment to find the optimal setting for a given type of image.
  • Saving an image in JPG format causes a loss in quality that is cumulative over generations of saves: a "jpg of a jpg of a jpg" is going to look bad regardless of quality settings. Try to work from the earliest (highest quality) version available.
  • Charts, figures and screen captures are generally best (smallest) when saved in PNG-8 format.
  • PNG-8 images can be made dramatically smaller by reducing the number of colors (from 256 down to 8 or 16 is often sufficient for many charts and figures).
  • Using the screen capture feature is often an easy way to get an image of something displayed on your computer in a program that doesn't have easy functionality for exporting to JPG or PNG format. You can capture the entire screen (using the PrintScreen Button in Windows, Shift+Command(Apple)+3 on a Mac) and paste it into an image editor for cropping and saving. Or use a stand-alone screen capturing tool (Snipping Tool in Windows, Grab in Mac) to get just the element you want.
  • Remember to consider copyright; if you didn't create the image from scratch yourself and don't have explicit permission from the creator then posting it on the web is most likely illegal. See our copyright pointers for more details.

The Old Image and Thumbnail Tags

Historically we've used other image tags within Serckit: [image] and [thumbnail]. While we'd encourage you to use the new image tags described above the old ones still work and are documented here for your reference. They can be handy when you want an image that doesn't scale with the width of the current browser window.