Image Guidelines and Resources

Guidelines to adding images and other media to your articles. Also contains a list of useful image resource websites.

How to insert images into your articles

Adding a feature (main) image

The article’s main feature image is also used for the thumbnail image that accompanies the article’s introduction in the article lists on the website. Its upload size must be 800 px wide by a maximum of 535 px high (ratio 3:2). The article full-width image, as well as the thumbnail image is automatically re-sized by K2. If applicable, add a caption and credit text.

Screenshot of the image tab in K2 Screenshot of the image tab in K2

Adding in-line images

In-line images are added using the editor’s image insertion tool.

editor-insert-image-highlight

Adding an image gallery

Lorem ipsum dolor sit amet.

Image Sizing

All images are required to be re-sized proportionally according to the measurements in the table below. See the resources at the bottom of this guide for a list of useful editing tools. If you have any problems resizing and cropping your images, please contact Dianne Henning or Babs Gösgens for any assistance.

Extra large (full size) images
These images are used for pop-ups
Maximum height for full article width is: 535 px (ratio: 3:2) 
800 px
Large images (full article width)
Maximum height for full article width is: 400 px (ratio: 3:2)
600 px
Medium images* 290 px
Small images* 140 px
Thumbnail* 90 px

*Medium, small and thumbnail images will have the 2px border.

Image File Names

Image file names must be 30 characters maximum.

Example: setup-freebsd-server.jpg

Image Titles and Alt Texts

All images are required to have a meaningful title and alt text. Alt tags must be 50 characters maximum.

For more information on title and alt text conventions, please refer to this article: http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/6930/

Example: alt="How to setup server for Joomla"

 

Freestanding images (against a white or transparent background ) should preferably have whitespace around them (otherwise the grey border goes right to the side of the image).

Example of a wrong, freestanding image: joomla-logo-wrong

Example of a correct, freestanding image: joomla-logo-right

Image Captions and Credits

All image captions and credit need to be tagged like this:

<span class="itemImageCaption">Caption text</span>
<span class="itemImageCredit">Credit text</span>

The caption and credits should be immediately following the image tag:

<img src="/image.jpg" width="800" height="400" title="Meaningful title" alt="Meaningful alt text" />
<span class="itemImageCaption">Caption text</span>
<span class="itemImageCredit">Credit text</span>

Image Formats

In general, JPEG or JPG should be used for photographs, and PNG should be used for graphics (like logos). GIF is a deprecated format and should be avoided if possible. For more information about image formats, please refer to these sites:

Adding Video

Lorem ipsum dolor sit amet.

Image Resources

We have gathered a list of image resources for contributors as well as defined some rules for their use:

Last modified on Monday, 28 June 2010 14:48