Help? with images

Preparing images

A picture is worth a thousand words ...

... too true. You will be using photographs and images on your site. However, before you begin, there are some important things to mention about image preparation ...

1. Brush up your image

Your photograph is likely to benefit from a few adjustments here and there ... a judicious bit of cropping can make the most ordinary image look stunning. To do this you will need access to photo editing software. See "Links: photo/image editing resources" below.

2. Dimensions of the image (in pixels)

The dimensions (width x height) of images on a website are measured in pixels. The image needs to fit sensibly into the layout of the web page (a common width for a website is 980 pixels). Your camera may be taking photographs at, say, 3MP, which results in a very large size in pixels for each image (e.g. 3,700 x 2,600 pixels), as well as a very large file size in kilobytes (e.g. 1,803 kilobytes).

This very large image can be forced to display at, say, 300 x 211 pixels by specifying these new smaller dimensions in the HTML. But the underlying image would be unchanged and unnecessarily vast - slowing down the loading time of the web page and annoying your visitors. This is why images need to be physically resized for screen display.

3. File size of the image (in kilobytes)

There is another step that can be taken to further reduce file size - and that is to optimise or compress the image file. This can significantly reduce the file size in terms of bytes and is achieved using software like Adobe Photoshop, PaintShop Pro or an online utility.

The example image above, resized to 300 x 211 pixels and compressed, results in a file size of just 19 kilobytes.

CouchCMS can help!

Image resizing can be handled behind the scenes by Couch using the custom file uploader.

However, if you wish to insert images using the wysiwyg into a free-format area of your web page you will need to take care of the resizing before uploading the image.

The Couch image uploader

By using the Couch image uploader both the dimensions and file size of your image should be correct! NOTE: there is a size limit of 2MB per image ... (2MB = 2,048KB).

The Couch image uploader looks like this:
image uploader
Click on 'Browse Server'

... the dialog box shown below will appear.

image uploader

1. The type of resource defaults to Image.

2. The list of files and folders are all the image resources which have already been uploaded to your site ... these are the images which are residing on the host server - i.e. the 1and1 servers, if 1and1 is your web host. Or put another way, this list of image files and folders are NOT on your own laptop or desktop, they are already on the 1and1 server and are being used by your website!

3. These are folders which contain images. It is a good idea to set up folders to contain images for certain pages or areas of the website. To create a new folder click on 'Create New Folder' at the bottom of the dialog box.

4. These images are not contained within a folder.

5. Click on 'Browse ...' and a second dialog box will open - this is the 'File Upload' box. Here you can navigate to the location of the image on your own computer, select it and click 'Open'. The 'File Upload' box will close.

NOTE: make sure that you open up the folder you wish to upload into BEFORE clicking on 'Browse ...' and 'Upload'.

6. Click on 'Upload' to transfer the image from your own computer to the host server where your website is stored. After a pause the image will appear in the list of files (in alphabetical order).

FINAL STEP: having uploaded the image you now need to click on it to select it - the dialog box will close and you will return to the Couch image uploader which will now display a thumbnail version of your image and the file path.

VERY IMPORTANT ... scroll to the bottom of the screen and click SAVE!

save your changes

Upload File and folder management (inc. deleting a file)

Naming upload folders and uploaded files

Give your upload folders and uploaded files short but meaningful names e.g. store all the images for the About Us page in a folder named 'about-us' and give the photos a name that describes them in summary e.g. 'alan-and-juliet.jpg'.

Do NOT use SPACES, do NOT use special characters, do NOT use uppercase

Interpretation of space by computers can be unpredictable - do not use them!

Stick to a-z, 1-9 and '-'. This avoids potential problems with interpretation of special characters by web servers and operating systems.

Use lowercase only - web servers can be case sensitive.

Uploaded file management

Having uploaded a file you may wish to move it or delete it. Unfortunately drag and drop, copy/cut and paste cannot be done using the File Upload utility.

Look for a link in the Couch Admin Panel called 'Delete uploaded files'. You will find it near the bottom of the list of your website's page links (if not there please contact us). This utility allows you to delete uploaded files.

Insert an image using the wysiwyg (CKEditor)

Image size and dimensions

The wysiwyg image uploader does not physically resize or optimise/compress images. Please see the section above on 'Preparing Images'. You will need to resize and compress images before inserting them onto your website using this method.

1. Click within the page at the point where you wish to insert the image.

insert image

2. Then click on the Image icon link on the toolbar. The Image Properties dialog window will open.

insert image

Click on 'Browse Server' ... the dialog box shown below will appear.

image uploader

1. The type of resource defaults to Image.

2. The list of files and folders are all the image resources which have already been uploaded to your site ... these are the images which are residing on the host server - i.e. the 1and1 servers, if 1and1 is your web host. Or put another way, this list of image files and folders are NOT on your own laptop or desktop, they are already on the 1and1 server and are being used by your website!

3. These are folders which contain images. It is a good idea to set up folders to contain images for certain pages or areas of the website. To create a new folder click on 'Create New Folder' at the bottom of the dialog box.

4. These images are not contained within a folder.

5. If the image you want is already uploaded skip to step 7. below. If the image that you want is not already uploaded, i.e. is not shown in the images uploaded window ... ... click on 'Browse ...' and a second dialog box will open - this is the 'File Upload' box. Here you can navigate to the location of the image on your own computer, select it and click 'Open'. The 'File Upload' box will close.

NOTE: make sure that you open up the folder you wish to upload into BEFORE clicking on 'Browse ...' and 'Upload'.

6. Then click on 'Upload' to transfer the image from your own computer to the host server where your website is stored. After a pause the image will appear in the list of files (in alphabetical order).

7. IMPORTANT: having uploaded the image you now need to click on it to select it - the dialog box will close and you will return to the Image Properties dialog window.

image uploader

8. You will see your image in the preview window.

9. Type in 'Alternative Text' - a short description of the photograph (important for SEO).

10. The dimensions will default to the size of your image.

11. Click OK.

REMEMBER ... finished updating ...

Having made your changes ... VERY IMPORTANT ... scroll to the bottom of the screen and click SAVE!

save your changes

Image related bits & pieces

Get info about an image on your website

If you want to retrieve the name and dimensions of an image on your website : right click on the image. A menu will pop up and depending on the browser you are using you will see various options available to you. In Firefox click 'View Image' or 'View Image Info'.

You will also see the option to 'Save Image As ...' which may be useful.

Resize images when sending via email

If you email a photograph downloaded from your camera - it might be a very large file size, which can cause problems for the person receiving the email or it may be rejected by the mail server if it exceeds size limits.

Here is a link to a Microsoft Windows 7 help topic for resizing images to send in an email: Resize picture for email.

If the above instructions are not appropriate for your computer/operating system try googling something like "resize photos for sending by email" along with your operating system (Windows XP for example) and your email client (Outlook Express for example) and you will find plenty of helpful information out there!

Links : photo/image editing resources

Photo/image editing resources

If you do not have your own image editing software you may find the following links useful:

  • www.resizeimage.4u2ges.com : crop (i.e. cut out part of the original to make a new image), resize (i.e. change from 4,000 pixels in width to 1,000 pixels) and compress (i.e. reduce the file size from 3MB to 180KB) .jpg images online. Maximum file upload size is a generous 5MB. [tested & recommended!]
  • media4x.com/png-minimizer : an excellent online PNG compression utility. [tested & recommended!]
  • media4x.com/jpeg-minimizer : a similar utility for .jpg compression. [tested & recommended!]
  • tinypng.org : a drag and drop online PNG compression utility. [tested & recommended!]
  • PngOptimizer : free utility to download - PngOptimizer is free. It works on Windows XP/Vista/7. Easy to use, drag and drop PNG or Gif image files to reduce the file size before uploading. [tested & recommended!]
  • Photoscape : this is a link to CNET - a software download site. Photoscape is "... a free image editor that is designed to be fun and easy to use. It not only resizes, edits, and tweaks your digital snapshots and other image files but also creates slideshows and animated GIFs, captures screenshots, combines and splits images, and more."
  • Free photo editors : this is a link to a list of top 10 free photo editors for Windows.
  • PicResize : "Easily crop, resize, and edit your images online for FREE at PicResize" [tested & recommended!]
  • Croply : "the fastest free online image cropping service"
  • Photoshop Express Editor : "Quick fixes. Creative enhancements. Endless fun."
  • Pixlr : "The most popular online photo editor in the world!"
  • Smush.it : from the Yahoo Developer Network - "Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files."
  • webresizer : "This free online image Web Resizer helps you optimize photos for web or email. Easy to use. Amazing results!"
  • Paint.NET : "Paint.NET is free image and photo editing software for computers that run Windows."