How to Upload and Add Article Excerpt Images

Our new Drupal 7 homepage layout lists the titles of new and popular articles together with an image related each article.  The use of images leads to a more attractive and engaging page and this hopefully will encourage users to read articles that catch their eye. 
Excerpt image example
The graphic image associated with each article is not generated randomly but is actually embedded in each article. That means that editors need to upload an image to their article each time they create a new article.  Of course most of our existing articles don't have an associated image so it would be a good idea if editors not only added images to all new articles they create but also add them to their existing articles whenever they edit or update an existing article.
Each article actually needs to have two images or more exactly, one image in two different sizes: a full size image up to 500 pixels wide and a smaller thumbnail up to 300 pixels wide. Two images are needed because the first column and second columns on the homepage use different size images.
To upload the images to your articles you must first edit the article. If you scroll down the edit page you will see the buttons that allow you to upload the images
Image upload buttons
It is recommended that you upload images in JPG (or JPEG) format as this format can generally be compressed to take up less space than other formats.  Smaller sized images means your article web page will load quicker in the user's browser which is highly desirable. As a guideline the larger image should be no larger than 5KB.
You can readily obtain images from Google Image search or other image search engines. When looking for an image you may find the following guidelines useful:
  • Select an image which is thematically related to your article
  • Broadly speaking, photos and abstract images work better than those containing text as the latter can be confused with the text of your article's title
  • Try to download a larger image and then resize it down as this will give better results than upsizing
  • Be conscious of copyright and trademark issues
Please remember to optimize your images before uploading to reduce their size and thus improve the page load time. There are various apps available for optimizing images or you can use an online service like this one.
Once you have uploaded both images, click "Save" at the bottom of the article edit page to complete the process.