Guidance for creating and editing website pages

Lesson 6 - Web Image Management

As was seen in Lesson 5, images are embedded onto a web-page by means of some quite simple code.

Images can be previously resized to fit exactly on the page (primarily in terms of width) or larger images can be uploaded to the server in the first instance.

(See Lesson 2 and Lesson 3 to see how to resize images using either 'Easy Image Modifier' or 'Paint.Net'.)

It is generally preferable to resize images exactly - except if they are very small - some logos etc.

Examples of resized (events) images:

For the website 'Events' page:

The code for this image is as follows:

<img src="images/events/18-1-19fishquiz440.jpg" alt="Quiz 'n' Fish and Chip Supper" style="width:440px; height:623px;"/>

As can be seen, this image was sized to 440 pixels wide for uniformity on the BRT website 'Events' page, and its height (which may vary from image-to-image) is 623 pixels.

The image's alternative 'alt' title is "Quiz 'n' Fish and Chip Supper".

The same image was resized to 240 pixels wide for the website's front ('Index') page:

The code for this image is now:

<img src="images/events/18-1-19fishquiz240.jpg" alt="Quiz 'n' Fish and Chip Supper" style="width:240px; height:340px;">

The size of the image is now 240 pixels wide by 340 pixels high.

Image naming conventions

As was discussed in Lesson 1, a folder system is needed to store all pages and images etc. for use on the website. There are two, practically identical, copies of this filing system, one created on the website server and one, the master copy, held on the webmaster's own computer.

As can be seen above, the file names for the Fish and Chip Supper images are:

18-1-19fishquiz440.jpg

and:

18-1-19fishquiz240.jpg

(N.B. The size of the image is used as the differentiating identifier.)

The first part of the file name is the date in reverse order - i.e. - Year, Month, Day. Using dates in this way ensures that the images in the (twin - master and server) folders remain in chronological order for easier indexing and future reference.

All separate images need unique file names.

A suggested folder structure for local publishing (on and from your own computer for your viewing only) of webpages for your own review and testing purposes is as follows (in Win 7 - other Windows operating systems are similar):

Documents > My Documents > Website > images > (with sub-folders as needed).

As can be seen, the folder structure was created to include an 'events' folder (amongst others) within the 'images' folder, all of these are contained inside the 'Website' folder

Website > images > events + other folders as needed

Place ('Save', 'Save as', or copy and paste) your newly created and renamed image files into the 'events' folder on your own computer. Instructions for uploading to the server will follow in a further lesson.

Image formats

Images can exist in a number of different formats.

Each format has its own pros and cons.

Some of these formats are as follows:

Images used on the BRT website (and most other websites) are almost always in .jpg format.

This is because the files are quite small in physical size, usually just a few Kilobytes (Kb). This makes for quick loading, and also takes up less space on the server.

It should be noted that JPEG applies lossy compression to images, which result in a significant reduction of the file size. However, these files suffer 'generational degradation' when repeatedly edited and saved.

For this reason, both the 440 pixels wide and 240 pixel wide versions should be resized from the original image, and the 240 pixel version SHOULD NOT be directly resized from the 440 pixel image.

Examples follow:

This image is in .JPG format = 49.7 Kb:

This image is in .PNG format = 183 Kb:

This image is in .BMP format = 291 Kb:

I will leave it to the viewer to decide whether they can visually determine any difference in the quality of the image here!

The finished product (actually a different crop selection) from Lesson 3 - Pier attendant. C.1891.

This image is stored on the server at a larger size than is displayed here. On the server it is 1026 pixels wide, whilst this page can only support images of 760 pixels width (as displayed) or less.

If you right click on the image and 'Save Image As' to your own machine for viewing there it will display at 1026 pixels wide by 846 pixels high - in fact the scaling will be exactly the same as seen on the three varying format pictures directly above.

As a matter of BRT policy we do not normally upload images at anything above their intended display resolution. The reason for this is so that others cannot 'harvest' our images for their own use (other websites, printing etc.) at a higher quality than we choose to display them at.

Here endeth the sixth lesson in web page production!

Go to the Lesson 7 page - Local and server publishing

Return to the Home page