How to use pictures

Your website has a lot of features for to help present your photos and other images in the best way possible to users, search engines and social media publicity (facebook, twitter etc). To get the best out of this, please note the following.

1. Photo preparation

  1. Rename the photo: almost all websites will use the filename both as part of the link of the picture and the initial title.  The filename “IMG_0958.JPG” set by your camera is useless to users and search engines, please rename it before it gets to the internet.  Note however it is best to use a fairly short name without too many spaces
  2.  Caption – set the initial photo caption, which can be a longer description than the filename.  Note that Microsoft image editing software does not set the correct caption field, how to do this correctly depends on the software, below we give examples using digiKam and Picasa which are both free!
  3. Crop and Resize the photo – modern cameras take a picture much too large to fit onto the screen which can just slow down your websites.
    1. first crop unnecessary parts of your picture
    2. then resize to reduce file size, as a suggestion for web pages,
      • image width no larger than 1200
      • file size no larger than 2MB
      • image quality 82:  this is the jpeg compression setting used by the website. This compresses the images for faster download without noticeable quality loss:  if your software supports it use this setting.

digikam example

  1. Rename:  menu Image, Rename or right-click, Rename or function F2
  2. Caption:  menu Image, Metadata, Edit All Metadata

    digiKam metadata screenshot
    Screenshot for setting caption in digiKam
  3. Crop and Resize:  menu Tools, Image Editor, then in the Image Editor,  menu Transform, Resize

Picasa example

Picasa has limited features compared to digiKam but it’s really easy to use and does most of what we need:

  1. Rename:  menu File, Rename
  2. Caption:   open the image and type in the box directly under the image
  3. Crop and Resize
    • use Picasa Crop function to reduce area of photo
    • use Picasa File, Export to Folder to export with reduced size

Both Picasa and digiKam complete the various caption fields used by different software, digiKam has full capability to embed additional copyright and other information into the page.  You can see this in Windows Explorer properties for the file:

Windows image properties
Windows Properties screen showing caption set

Lastly even if you haven’t done all of this, the website can help you as below.

Uploading Images

  1. First choose the page or post you are going to add the images too, for example create a new Post – it helps organize the images if you put them onto a page first.
  2. Next press the “Add Media” button just above the text:  you can then add media as you like, you can even drag the pictures into the web page.
  3. Once the pictures are uploaded, revise the information and check the titles are make sense – add some if missing – and assign some tags or categories to help you find the pictures again later.
    • Caption and Title will be read automatically from your image
    • Alternative Text should be set because it describes the picture for search engines and appears when the picture cannot be loaded
    • Description can be a fully-formatted description including links etc, effectively this makes a detail web page about this picture.
    • Categories and Tags and highly recommended to catalog and be able to find pictures later!   This can also be used for features such as gallery and tag cloud, to show visitors all pictures with a particular tag…

Media edit screen

After adding an image, set the text, and categories and tags to help find the images later

Tips and Tricks

  • When you Add Media, you can search and select by tags or categories to find the images you need – hopefully you tagged the as you uploaded them didn’t you?
  • If you have a lot of images to show, use  “Add Robo Gallery”:  you will need to go over to the Gallery page to create a gallery, but from there you can add as many images as you like, the Robo Gallery tool will help optimize how these are loaded and displayed on the page.Chipster Add Robo Gallery
  • If you need to load a very large image, add “-noresize” to the filename
  • To load an image from another website, use Add Media, Insert from URL

Leave a Reply