Luminis Web Image Optimization

Optimizing your website’s performance by properly preparing your images for online viewing.

Curt Price  |  cprice@siue.edu  |  618-650-5500

The two primary image file types that are used online are .jpg (Joint Photographic Expert Group) and .gif (Graphics Interchange Format).
JPEG (or JPG):  Use this format when working with photos or images with gradients.

GIF:  Use this format when working with an image with relatively few colors or flat tones.

TIP:  When editing an image, it might be in your best interest to work with a copy of the original image file and save the original in a safe place in case you want to access it again in the future.

Image editing Programs:

There are many image editing programs that are capable of doing a nice job.

Some are free and some cost money and some cost a LOT of money.
Adobe Photoshop ( http://www.adobe.com/products/photoshop/ ) is the reigning king of all image editing software.  However, it is expensive, it has a steep learning curve, and it is overkill if all you are looking for is a simple program to resize and resample images for the web.  You do not need this program for simple image editing.
We are going to concentrate on some of the better free image editing programs.

Windows:
    Irfanview(small, simple program, free)

       http://www.irfanview.com/

    Gimpshop (larger, more complex program, similar to Photoshop…but free)
        http://plasticbugs.com/?page_id=294

    Splashup(IE ONLY – An In-browser image editor, like Luminis & Blackboard)
       http://www.splashup.com

    Photoshop Express (FREE – In Browser Photo Editor)
       https://www.photoshop.com/express/landing.html

Mac:

    Gimpshop
       http://plasticbugs.com/?page_id=294

Using Irfanview:

    Resize & Resample:
        Click ‘Image’ then ‘Resize/Resample’

    Lighten an image, Darken an Image, Adjust Contrast:
        Click ‘Image’ then ‘Enhance Colors’

Using GIMP:

    Resize/Resample:
        Click ‘Image’ then ‘Image Size’

    Lighten an image, Darken an image, Adjust Contrast:

        Click ‘Image’ then ‘Adjustments’ then ‘Brightness-Contrast’

    Creating Rounded Corners on an image:

1. Open your image
2. Click ‘Select’ then ‘Rounded Rectangle’
3. Click ‘Select’ then ‘Inverse’
4. Click ‘Edit’ then ‘Cut’
5. Save your work

Important Rules:

1. Never resize your image from within the Luminis editor.  This does NOT change the file size of the image, just the dimensions.
2. Always save your web images at 72dpi.  Anything more is overkill and will cause slower load times.
3. Always save photos or images with many colors and gradients as a .JPG.  Always save images with graphical flat tones or with relatively few colors as a .GIF.
4. Try not to resize an image to be bigger than the original image size.  This will reduce the quality of the image.
5. Never resize an image just horizontally or just vertically.  This will cause the image to look stretched and unprofessional. (unless that is the look you are going for)

2 Column Layout (maximum image sizes):

3 Column Layout (maximum images sizes):

Royalty Free Online Photo Galleries:

This site allows you to use their archive of user submitted high resolution photographs, free of charge.
http://www.morguefile.com    |    http://www.sxc.hu