Section 1: HTML for Images
Images are defined with the <img> tag.
- In HTML, the <img> tag, like the line break tag (<br>), is an empty tag which means that it does not have any content or a closing tag.
-
Images are not technically inserted into an HTML
page, images are linked to HTML pages.
- When you request a page from the server, the client will open a HTTP connection for the main HTML file for that page. For every single other element on that page, images, CSS files, scripts, the browser will open another HTTP connection to the server.
- So for example if you have a page, with 15 images, 1 css and 2 scripts, you will need 19 connections. Many of these will happen in parallel, although there is a limit of the maximum number of connections the browser will make to the same server at one time.
- The <img > tag creates a holding space for the referenced image.
src
The most important attribute of the image tag is src (meaning source).
- The value of the src attribute is the URL of the image you want to display on your page.
-
The URL points to the location where the image is stored.
<img src="boat.jpg" >
- Ideally, your image URLs will be in reference to where your document is stored.
- URLs will be discussed in greater detail in an upcoming section.
alt
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed, such as with a screen reader, and can assist people with visual impairments in understanding the content or purpose of the image on the page.
- The value of the alt attribute is author-defined text.
- The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.
- The "alt" attribute provides a text alternative that should summarize the purpose of an image as succinctly as possible (preferably with no more than 100 characters).
- The browser will then display the alternate text instead of the image.
-
Use a period after the alt text, it will allow a person with their
text read to them to know when one image has ended and the next has
began.
<img src="boat.jpg" alt="This is a photo of my speedboat.">
- Techniques for wrapping text around images will be discussed with CSS and Images.
title
The optional title attribute represents advisory information for the element, such as would be appropriate for a tooltip.
-
The value of the title attribute is author-defined text.
<img src="figures/pigHula.gif" alt="This is an image of Hula pig." title="Everybody loves a Hula Pig!" >
-
The "title" attribute text will be displayed by most browsers as a
tooltip when the cursor hovers over the image. Try it!
Section 2: CSS for Images: Centering
A common task for CSS is to horizontally center an image.To center an image you must specify multiple CSS property:value pairs:
- display
- margin-left
- margin-right
The display property must be set to block. Block will be discussed more later, but a block element is an element that takes up the full width available, and has a line break before and after it.
display: block;
Block elements can be center-aligned by setting the left and right margins to "auto".
margin-left:auto;
margin-right:auto;
Here is an example of a centered image. Inline CSS is used only for demonstration purposes.
<img src = "figures/pigInternet.jpg" alt="World Wide Pig"
style="display:block; margin-left:auto; margin-right:auto;">
Section 3: Image Size
To display a full-size image it is usually adequate to specify only the width in units like pixels or ems.
<img src="figures/pigHula.gif" alt="Hula pig." style="width:122px;" >
If you specify an image width using a percentage, the browser will interpret that as the percentage of the container in which the image is placed, like the body tag, a div tag, or a figure tag.
- This is useful if the size of the container has been specified.
- In that case, if you specify, for example, width:15%, the image will be 15% of the container width and will easily resize when the window resizes.
If you want an image to be a percentage of its natural size, you can use special code like the following:
<img src="example.png" alt="example image."
onload="this.width*=0.5; this.onload=null;" >
Section 4: Image Formats
JPEG or JPG was named for the committee that created the standard, the Joint Photographic Experts Group.
- Is one of the most common image compression methods, especially for web usage
- Degrees of compression can be adjusted
- Uses a lossy compression method
- Best for photographs and realistic paintings with smooth variations of tone and color
- Avoid with line drawings and other textual graphics or icons
GIF stands for Graphics Interchange Format
- Supports up to 8 bits per pixel (256 colors)
- Because of color limitations is a poor choice for reproducing images with continuous color
- Good for simpler images with solid areas of color
- Is a lossless compression method
PNG stands for Portable Network Graphics – pronounced "ping" or spelled out P-N-G
- Uses a lossless compression format
- Created to improve upon and replace GIF
- Supports 24-bit RGB colors and greyscale
- Does not support other color spaces than RGB
BMP
- Pronounced bitmap
- Used commonly by GUIs, especially by Microsoft Windows
- Is an uncompressed format – means typically larger file sizes
- Supports anywhere from 1 to 32 bits per pixel
SVG stands for Scalable Vector Graphic.
- XML-based, open standard created and developed by the World Wide Web Consortium to address the need for a versatile, scriptable, and all-purpose vector format for the web.
- Can be resized to fit the computer screen or zoomed into without becoming blocky and losing sharpness.
- Solved - Best Image Format for the Web? PNG, JPG, GIF, and SVG
Section 5: Resources
Advanced Images (INFO 2220 Supplement)
Image Maps (INFO 2220 Supplement)
Web Image Formats & Google’s WebP
Image Compression (INFO 2220 Supplement)
Image Optimization (INFO 2220 Supplement)