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

Adding in-line images

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

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: 
Example of a correct, freestanding image: 

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:

• http://en.wikipedia.org/wiki/Image_file_formats
• http://www.w3.org/Graphics/

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:

• http://www.123rf.com/freeimages.php
  123RF has a great collection of royalty free stock images. The free collection is always different, it changes every few hours. It would  be a good idea to browse the images from time to time, and download those that seem interesting for future use.
  
  Terms of use: http://www.123rf.com/license.php?type=free
• http://www.sxc.hu/
  
  Terms of use: http://www.sxc.hu/info.phtml?f=help&s=7_2
• http://www.morguefile.com/
  
  Terms of use: http://www.morguefile.com/license/morguefile/
• http://www.dreamstime.com/free-photos
• http://www.unprofound.com/
  
  This site categorized its pictures by color. There seems to be no restrictions towards using these images.