Class 4 - Images & Image Code
Image Overview
D01 - Image file types and compression
- D01a - (5:07)
- Important rules about images:
- Never alter the original image. You may need to modify it later.
- Always save original images and never edit them.
- Edit copies of the original image.
- Never compress an image more than once if possible.
- Never alter the original image. You may need to modify it later.
- File sizes vs. image dimensions:
- Files sizes are not the same as image dimensions.
- File sizes are measured in bytes, such as kilobytes (KB), megabytes (MB). It refers to the amount of disk space or download time that a file uses.
- Image dimensions on the web are measured in pixels (picture elements - dots of color) and displayed at a size relative to the monitor resolution.
- An image that is 1024 pixels wide would fill the width of a monitor screen if the monitor is set to that width, and an image 512 wide would fill half the width.
- Compression is used to reduce image file sizes.
- Smaller file sizes = lower image quality = faster download times
- Lossy and Lossless compression
- Lossy: image data is lost
- Lossless: image date is not lost
- Comparison between jpg and gif formats
- Important rules about images:
- D01b - (9:56)
- Comparison between jpg and gif formats - continued
- jpg / .jpeg
- Pronounced jay-peg
- An abbreviation of:
- Joint Photographers' Experts Group
- Lossy compression
- Generally for photos
- Reducing the Quality level reduces file size
- gif
- Pronounced either:
- giff - with a hard g as in gas
- jif - with a soft g as in Georgia - like the peanut butter
- An abbreviation of:
- Graphics Interchange Format.
- Lossless, up to 256 colors, then lossy.
- Generally for logos, cartoon images, any image that consists of solid colors.
- Allows for animation, but will create file sizes larger than Flash's compressed .swf format when used for vector images or larger dimensions.
- Allows for transparency to replace colors in the image so that a background color or background image can be seen through the transparent areas.
- Limited to 256 colors. Reducing the amount of colors reduces the file size.
- Pronounced either:
- png
- Pronounced ping
- An abbreviation of:
- Portable Network Graphics
- Internet Explorer 8 has improved its support of png, but there are significant problems with versions 7 and earlier.
- Allows for transparency
- There are many different ways to save png files each having varying levels of information such as bit depth, which determines how many possible colors can be specified for a pixel, and alpha channels. Reducing file sizes depends on the amount of data stored.
D02 - <img> tag and attributes
- D02a - (4:08)
- src= attribute
- Specifies the location of the image file to be shown in the page
- This attribute is required otherwise no image will be shown.
- Any path type will work:
- absolute
- document relative
- site root relative
- Image link assignment: Follow these steps to insert an image on an html page using an absolute path:
- Create a new html page.
- Save it, naming it yourlastname_D02.html
- Right click on the following image to get the full URL to it:
- Chrome: Copy Image URL
- Firefox: Copy Image Location
- IE7: Properties > highlight the url of the image in the info box that opens > copy it
- Safari: Copy Image Address
- Then, use the image tag to put this image on the page you made using an absolute path.
- Include the html file in the files that you send me. The file will load the image on my computer too because it will point to the same absolute location.
- src= attribute
- D02b - (3:07)
- Added note: Subsequent to the recording I found out how to get image dimensions from Chrome. See below.
- To ascertain an image's dimensions using your browser:
- You can usually right
click on the image, select Properties (IE) or View Image Info (FF), and
the image dimensions ought to be given.
- On Mac use Ctrl-click if you (still?!) have a single button mouse.
- If you are using Safari:
- Right click on the image and select either Open Image in New Window or New Tab.
- The title bar of the window or tab that opens will have the dimensions.
- Chrome:
- Subsequent to the recording, I found that the image dimensions could be obtained from an image displayed in Chrome by right-clicking and selecting “Open Image in a New Tab”. Then the image will open in a new tab. The dimensions can then be seen in the tab although you can’t see all of it if the file name is too long. In that case, you need to hover over the tab to see them.
- You can usually right
click on the image, select Properties (IE) or View Image Info (FF), and
the image dimensions ought to be given.
- D02c - (5:54)
- width, height
- Specifying image dimensions in pixels speeds up page display.
- If the code tells the browser what size image to expect, the browser can set aside enough room for the image as it loads the page's text, which often begins before the image file downloads. Without the image size being specified, the browser has to wait for the image, determine its size, then rearrange the rest of the page to accommodate it before showing it.
- To specify size, use the width and height attributes in the <img> tag. The dimensions are pixels, but all you need is the numbers,:
- For example:
width=250 height=325
- Do not add px or pixels etc. after the numbers, include just the numbers. This is html and not css. In html all numbers are assumed to be pixels unless there is a % symbol after them, which is the only other measurement unit in html.
- In css you are required to provide a unit of measurement because there are many to choose from.
- For example:
- If you want to stretch or shrink an image, the image size attributes can do it for you, too. However, don't expect to stretch or shrink an image without seeing the image quality deteriorate. It's always better to make the image the correct size instead of distorting it using these attributes.
- D02d - (6:08)
- alt
- Alternate text
- The alternate text allows for the following.
- Viewers will see the alt text in the location where the image will be going as soon as the image downloads.
- If the image does not load at all, the alternate text will be seen in place of the image.
- Any image that contains text ought to have that text in the image's alt attribute.
- Some browsers will display the alternate text as a "screen hint" for a few seconds when a mouse hovers over the image.
- Perhaps most importantly, html readers for the visually impaired use the alt text to describe the image aurally.
- Finally, search engines will find the alt text and allow searches to find your page based on the text (but it does not guarantee a high listing!).
D03 - Image Assignment:
- D03a - (1:53)
- You will now download images to use for this exercise.
- You will use them for testing now and they will also be used in the assignments:
- Create a folder named YourLastName_D03
- Within that folder create a new folder named images
- Download the image files that you will need for this exercise and put them into that images folder.
- D03b - (11:15)
- Create a new page with standard page structure tags.
- Save the file as YourLastName_D03.html
- Give it an html title of Using the image tag
- Create a suitable <h1> heading of your choice for the top of the page.
- After the heading, make a table with 3 rows and 2 columns
- Include a border=1 attribute in the table tag.
- Put an image into each cell using the image tag.
- After each image tag put in a break tag.
- Follow it with a very short caption of your choosing using the <em> tag to italicize it. Make sure that the caption is not longer than two or three words.
- Then add two break tags to add some space underneath the caption.
- Provide each image tag with an appropriate alt attribute.
- alt attribute values (words) need to be in quotes if they contain any spaces, and most of them do.
- For example:
- NOT correct (spaces require quotes!):
alt=Author Mark Twain in Connecticut
- Correct:
alt="Author Mark Twain in Connecticut"
- NOT correct (spaces require quotes!):
- Note that this is true of all attribute values: if there is a space, quotes are required.
- Include width and height attributes with values (dimensions in pixels) that are correct for the images, which are all the same size.
- To do this, you can first put in the image tags using the src attribute and a document relative path to the image file, then use the methods mentioned previously to get the dimensions.
- There are six images and six table cells.
- Please send me the YourLastName_D03.html file.
Image links
- D04 - (7:18)
- It is easy to make an image into a link. Simply enclose the <img> tag with an <a> tag with the href attribute.
- For example:
<a href=http://www.google.com><img src=images/picture.jpg></a>
- Image Link Assignment:
- Copy the file that you created that has the images in the table.
- Name the copy YourLastName_D04.html
- Make each image into a link.
- Have each image linked to a different web location.
- You can use any locations, but they need to be different for each image.
- Also make the text into links for the same url's as their corresponding image.
- BUT make the links for the images and text discrete, that is, each needs to have its own pair of anchor tags.
- That is proper coding, each being its own element. An element is an opening and closing tag and all the stuff between them.
- Include the target=_blank attribute in each link.
- Add this attribute so that an ugly blue line does not appear around the image. This attribute has been deprecated, but until you learn the css equivalent, use this attribute in each anchor tag: border=0
- Please send me your file: YourLastName_D04.html
- BTW, the order of attributes within a tag does not matter. Also, if there is one space anywhere it the code, including inside tags, you can have as many spaces as you want, but it's not always neat coding to do so.
Image Hot Spots
- D05a - (5:26)
- Added Note: Keep your hot spot area as big as is reasonably possible given the circumstances.
- Intro to image hot spots.
- An image map is a way to specify an area on an image that can be used as a link.
- The shapes can be one of the following:
- rectangle (rect)
- polygon (poly)
- circle (circle) - note that an oval shape is not an option
- These areas are commonly referred to as hot spots but also image hot spots and image maps.
- Note that there is a way to mimic hot spots using a method called slicing which cuts an image into smaller images (slices) which can then each be assigned links.
- Image hot spots cannot be seen or detected unless you move your mouse over them and see the pointing finger indicating a link (or JavaScript) is there. It is important to inform the viewer in some way that they can click on such an image otherwise they may not know there are any links there.
- The lower image is the same image as the top one, but shows graphically the rectangular hot spot areas
- Overview of the steps for creating image map hot spots:
- Identify in the code the image that is to be used.
- Delineate the areas of the image that are to have hot spots.
- Specify the shape of each hot spot.
- Specify each shape's dimensions in pixels relative to the upper left corner of the image.
- Add links
- More examples of image hot spots.
- D05, D06, and D07: