Professional Website
Development
TECH 272

Basic Image Manipulation and Creation

  • Things to consider when creating or choosing an image
    • Image Types
      • Good for the web
        • .gif (pronounced "jif") First format suitable for web. Good for flat colors and hard edges (clip art, cartoon like images). Supports transparency and animation.
        • .jpg ("jay-peg") Good for photos and smooth color blends. Produces reasonable file sizes.
        • .png ("ping") Specifically designed for web use and native file type for Adobe Fireworks. Supports progressive transparency. Good for any image type.
        • .svg is a scalable vector graphic - infinitely scaleable
        • .heic - Apple's default image file type now.
          A HEIC file is a High Efficiency Image Container file format that stores digital images and image sequences. Apple developed HEIC files in 2017 for iOS 11 and MacOS High Sierra. HEIC files are the standard image format for Apple users and have several advantages over other image file types, including: 
          • Space-saving: HEIC files are half the size of JPEGs. 
          • High-quality images: HEIC files offer the same high-quality images as other image file types. 
          • Modern compression methods: HEIC files use advanced compression methods to create smaller file sizes while retaining higher image quality. 

      • Not so good
        • .tiff
        • .pds
        • .bmp
    • Colors - Anything goes! Throw out the Web-safe color pallets! See stats
      • Based on old 8-bit monitor architecture
      • Most have 24-32 bit now (80%) almost everyone else has 16-bit.
    • Screen Sizes and Resolutions - See stats
      • Approximate pixels available for the different resolutions:
        For 800x600: approx 745 pixels wide
        For 1024x768: approx 970 pixels wide
  • Welcome to GIMP -- other image editors (Photoshop, Illustrator)
    • Exercise 1: Let's resize, change file types, crop and optimize images!
      • Download and unzip this file of vacation images and try the below tasks using Fireworks.
        • Changing file types - pull in and resave or export
        • Resizing an Image
          • scale - pixles, approximately 200px
    • Exercise 2: Let's create thumbnails in GIMP! Finished file. Start with this file. Use this page to hold your large image.
      • Find a few large images that you really like. Images from your own camera work great!
      • Scale the image size (maintaining proportions) so that the width it's about 700px.
      • Export the file as imagename_lg.jpg.
      • Now scale the image again to about 100px wide and resave it as imagename_sm.jpg.
      • Add the thumbnail images to your gallery page. Don't forget to specify image height and width...why? And don't forget your alt tag.
      • Create an html page for each of the large images and place the large image on the page with a link back to the gallery page.
    • Floating an image on a page
      • Using the align attribute on the <img> tag, you can "float" an image to the right, left or middle of a page. Like this....
        • <img src="lg_image.jpg" alt="Link to large image of Cameron Moll site" width="75" height="125" align="left" / >
      • Use the break tag with the <br clear="all" /> attribute to keep text and images from floating up.

GIMP Basics

Homework 4: Images & Linking

Now it is your turn to create thumbnails that link to larger images!

  1. Create a small gallery of thumbnail sized images (3-4 is adequate) and name it hw4.html. You should have at least one paragraph of text and a title, e.g., <h3>Me at the Eiffel Tower</h3>, to go with each image. Have each thumbnail image link to its larger version on a seperate html page as was done in the book.*
  2. Be sure to have a title and a link back to the image gallery on each large image page as we did in the video.
  3. Link hw4.html to your homepage using the Homework list on your homepage. Have the clickable text read HW4: Images & Linking