When uploading photos or images to your department's website using Drupal, it's essential that you to resize the images, cropping if necessary, so that they're suitable for use on the page you're uploading them to. This is so that they load quickly for users and so that they work within the layout of the DCU website.
Below you'll find guidelines on image sizes, file naming and tutorials on cropping/resizing using Adobe Photoshop Elements and Irfanview
Image size guidelines for use on DCU website pages
These image sizes are for use in the new DCU website layout, launching in May 2013. These size guidelines are still being developed. If you are editing and adding images during April 2013, you should consult with ISS first.
- News Article Image: 900px wide, 463px high.
(Drupal will automatically create preview and smaller versions of images for around the DCU site)
- Other images - full page width: 900px wide maximum.
Images do not need to be 900px wide. 900px wide is the maximum size the web site can display.
- Image gallery preview image/thumbnail: 225px wide, 150px high.
If you wish to offer users the option of seeing larger versions of your images, you can do it by:
- Preparing and uploading the larger version of your image.
- Creating a preview version of your image using one of the recommended sizes above.
- Linking it to the larger version of your image, or consider creating an image gallery.
Image file naming conventions
It is recommended that you use the following file naming conventions when saving images for use on the DCU website. This helps in the organisation and management of the DCU website.
- All file names should be lower-case.
- The file name should begin with your department name (or a shortened version of it).
- You should use a hyphen (-) in place of spaces or an underscores (_.)
- The file name should be short and descriptive.
Using Adobe Photoshop Elements to crop and resize images
Adobe Photoshop Elements can be used to prepare your images for web by cropping and resizing them. A licence for Photoshop Elements is quite inexpensive and can be purchased from Micromail (micromail.ie). ISS can then arrange for it to be installed on your computer.
You can resize and crop images using Photoshop Elements, as follows:
- Open Adobe Photoshop Elements. If prompted (depending on your version), select Editor mode.
- Click Open from the File menu and select the image you wish to crop. Your screen should look something like the one below, depending on the version of Photoshop Elements you're running.
- Click the Crop tool from the Tools bar on the left side of the screen. (shown below)
- Fill in the Aspect Ratio, Width, Height and Resolution fields that appear above the image (shown below) as follows:
- Aspect Ratio: Custom
- Resolution: 72 pixels/inch
- Width and Height: as per Image size guidelines above.
- Click and drag the crop tool over the area you wish to crop (shown below left).
You can adjust the crop boundary by moving your cursor to the corner of the cropping area, clicking and adjusting as necessary (shown above right).
- When you have finished setting your crop boundary, click on the green tick to set the crop in place.(shown below)
- Click File > Save for Web. You will see a screen like the one below:
You should use the following settings:
You can safely ignore other settings on this screen.
- File type dropdown: JPEG
- Quality: 70
- Progressive: ticked
- The Save Optimized As screen will then pop up. You should use the following settings:
- File name: follow the Image file naming conventions listed above.
- Save as type: Images only (*.jpg).
- Click Save
Some of these steps may vary depending on the version of Adobe Photoshop Elements you are using.
Using IrfanView to resize images.
IrfanView is a free image viewer / resizing tool available to download from www.irfanview.net. It is also available to install from the Novell ZenWorks Window on your machine (if you're using Windows 7.)
IrfanView only offers the ability to resize images and does not offer a crop feature. For better results, it is recommended that you use Adobe Photoshop Elements.
- Open IrfanView.
- Open the image you wish to resize by clicking on File > Open.
- Open the Resize/Resample tool by clicking on Image > Resize/Resample.
- You'll then see a screen similar to below:
- Under Set new size, set the width of the image as per the guidelines above. If you are resizing a photo for general use, you should ensure that the Preserve aspect ratio (proportional) option is ticked:
- Make sure the Apply sharpen after resample box is ticked.
- Size method settings should be as follows:
- Resample (better quality) selected.
- Resample filter (enlarging only) should be set to Lancszos (slowest)
- DPI should be set to 72.
- Click OK
- Click File > Save As. You'll then see a screen like the one below:
- Name the file according to the image file naming conventions listed above
- You should use the following settings when saving the image:
- Save as type: JPG - JPG/JPEG Format
- Save quality: Set to 70%
- All tick boxes should be set to unticked, except for Reset EXIF orientation tag, which should be ticked.