IAC logo

The world of non-commercial film and A-V

Events Diary Search
The Film and Video Institute find us on facebook Join us on Facebook

 

Processing Pictures for your website

Preparing images for a website is a multi stage process:

Crop images - use an image editing program to cut out of each picture just the part you want. Sometimes you can cut several different good images out of the same original picture. Try to use the crop tool to frame the subject well. If someone is shown in profile allow some space in front of them so they do not seem to have their nose crushed against the edge of the picture.

Adjust contrast & colour - even if the original was perfect, changing its size and shape make it look different. Adjust the contrast so that it looks right, then carefully adjust colour intensity or overall hue.

Shrink images - whilst you can upload (send) any size of image to your website, but there is no point in sending a larger version than you need - it takes longer to load but delivers no additional picture quality. On a website typically a full width picture would need to be around 720*480 and a half size would be 360*240. Now an SD video frame is 720*576 pixels so frame grabs work well on websites with relatively little shrinking required as they have a similar resolution. Just remember that a video frame grab needs to ne stretched to look right as a still (see below).

On the other hand the images from a modest compact camera are far too large (a 9 megapixel image is 3600*2500). Therefore they need to be shrunk considerably maybe to between a fifth and a tenth of their original size. Make sure the aspect ratio is maintained.

Save images - make sure you keep the original images and then save the images for the web in a separate folder. Your image files probably have a name like "DSCF0024.JPG" or "grab01.png At the end of the picture editing process take the opportunity to rename them with a descriptive name - something like "Pat-Smith-gets-top-prize-2010.jpg" or "club-shoot-june-2010.png" Those types of names help you identify them and some search engines identify the images.

Use jpeg or png file types to save pictures for the web. They both compress image files so that they travel faster over the internet.

Picture editing - to make all those changes you need a suitable image editor. Many still cameras come with one on a disc. Your computer probably has a basic one in the operating system. We suggest some free ones below.


Frame Grabs

Re-sizing pictures

Many video editing systems make it easy to export an image. If not, burn a DVD, play it on VLC, the excellent, free media player (for PCs and Macs from www.videolan.org/vlc) Pause at a good image, right-click, from the pop-up menus choose Video and then Snapshot. What's more it presents the pictures in the right aspect ratio.

Video pixels are not the same as stills ones. We know SD video records 720*576 , but that size is wrong for stills. [Do the sums: stills from 4:3 films should be 768 pixels wide; from 16:9 films 1024 pixels wide.] The image needs to be stretched to the 4:3 or 16:9 aspect ratio. Some capture systems do that for you, most do not.

Look for a "maintain aspect ratio" option in your picture editing program and turn it off. Make your screen grab 1024 or 768 wide, keeping height at 576. That makes it look right. Then turn on the "maintain aspect rato" again and adjust the image size to suit your website. 200 - 300 pixels wide is often about right.

De-interlacing

Conventional video builds images by recording alternate lines. If there is movement in the frame a still may look blurred. Look for a "de-interlace" option in your picture editing program, which will select either all the odd numbered lines or all the even numbered ones. That removes much of the blur.

4-3 still as captured at 720 by 576 and looking distorted.

A 16-9 image compressed to 720 by 576 pixels.

An interlaced still from a film.

SD from camcorder
 captured at 720 by 576

widescreen from camcorder
captured at 720 by 576

interlaced from camcorder

4-3 image stretched to 764 by 576 and looking right.

A 16-9 image at 1024 by 576 pixels.

The same still but now de-interlaced.

stretched to 4:3 ratio

stretched to 16:9 ratio

de-interlaced


Picture Editing Programs

Copyright & Legalities

To tweak and resize images you need a computer program. Windows and Mac machines have built-in image programs with limited abilities. Many cameras come with basic photo editing tools.

There are hundreds more you can download or buy. These ranging from free to hundreds of pounds in price. For website purposes free / cheap programs are fine. Free programs worth trying:

  • Picasa - Google's picture editing and handling program is available for Windows, Macs and Linux.
  • Vicman Photo! Editor (is a free Windows dowload) - and they even have a free online system here which lets you upload pics from any computer system, edit and save them back to your machine.
  • Gimp - odd name but works well with Windows, Mac and Linux operating systems.
In Britain the creator of any artwork is usually assumed to own copyright in that work. Photographs from any source belong to someone. She or he may choose to make them available for general use. Photo sites like flickr often have large quantities of work available under a Creative Commons Licence. (Check the terms in each case, often the photographer will require a credit.)

Remember that most images are copyright and should only be used with the permission of the person who took them. It is also tactful to ask approval from club members before showing their pictures online.

In practice most publicity pictures - e.g. of new cameras and gadgets - are copyright but no one minds if you use them ... provided you do not make fun of or criticise the product unfairly.

The Weebly Way

Tips on: pictures in Weebly | creating galleries & slide-shows in weebly

Weebly offers a way  for absolute beginners to create good websites
easily and without cost. Our series on how to use it begins here.

Right arrow. Go to Getting Pictures

Go to Video Right arrow.

Right arrow. Go to Getting & Using Pictures

Website Makeover Guides - Introduction

What Should the Content Be? | Navigation | Planning Navigation | Anchors & Links | Words | Getting Pictures | Getting & Using Pictures
Processing Pictures | Video | Presentation Pictures | Colours | Layout Principles | Layout Schemes | Fonts | What is SEO?
Search Engine Factors | Check Your Search Ranking | Stay Legal | Website Health Check | Website No Goes more to come ...

A Beginner's Guide to Creating a Club Website with Weebly

Don't Panic! | Signing up to Weebly | Making your first (elegant) page | Adding more pages and navigation
Adding pictures and words | Creating a complex Coming Soon Page | Adding Forms, Emails, Maps and Videos.

IAC Competition to find the Best Club Website 2011


Share your passions.

Audience silhouette.

Share your stories.

Page updated on 19 January 2011
Contact Webmaster
Data Privacy
find us on facebook Join us on Facebook
Bookmark and Share
UNICA information UNICA member
Company Limited by Guarantee No. 00269085. Registered Charity No. 260467. Authors' views are not necessarily those of the Institute of Amateur Cinematographers. Website hosted by Merula. JavaScripts by JavaScript Source. Menu by Live Web Institute. Art work by Tony Kendle.