📖 Adding Images to a Website

Images

Images can add a lot to a web page. They can add visual interest to a page. They are useful for 'branding' your site with a logo or signature title. They can show your product or location, etc. Adding images to a web page is really quite simple. Images are stored as separate files from HTML document.

Video produced by GCFLearnFree.org

Acceptable image file formats

  • .GIF - best for solid colors, logos and geometric shapes
  • .JPG - photos and complex graphics
  • .PNG - good for all

Unacceptable image file formats

  • .BMP, .PSS, .TIFF or anything else
Image attributes

Images are inserted into a web page using the <img> tag. Image tags have several available attributes.

src="filename"

  • " filename" is the name of the image file
  • example: <img src="dog.gif">

Images are often saved in an images folder within a website to make it easier to manage and find the files, but that is not a requirement. They can be placed anywhere - but they must be saved somewhere within your website folder. If they are outside your folder, they will not display when you upload them to the server. The src attribute must specify a path if the image is not in same folder as HTML document.

  • <img src="dog.gif"> dog.gif is in the same folder as HTML document
  • <img src="images/dog.gif"> : dog.gif is in a folder called images which is in the same folder as HTML document
  • <img src="../images/dog.gif">: dog.gif is in a folder called images that is one level above the folder containing the HTML document

alt="text"

The alt text equivalent is very important to accessibility. Not all visitors to your site will have the same vision abilities. For those visitors who are sight challenged, the alt text may be the only way for them to get an idea of what the image represents. The W3 Accessibility Guidelines can provide help in understanding and implementing good alternative text.

  • Text displayed if image unavailable or turned off.
  • Displays when mouse pointer is over image.
  • Helpful for visually impaired.
  • <img src="dog.gif" alt="dog eating bone">
Optional

height="x" width="y"

  • Specifies height and width of image to be displayed in pixels
  • If omitted, browser has to figure it out
  • Speeds up page loading
  • Use image properties to determine size
  • Can change size for display but if increase size, can be fuzzy and if decrease size, better to reduce actual image size to speed downloading.
  • Newer development methods use styles to manage image sizes. This will be covered in CSS Styles.
File formats for the internet

GIF: Graphics Interchange Format

  • popular Web graphic format
  • contain a maximum of 256 colors.
  • good image compression, but if the image contains more than 256 colors quality is significantly reduced.
  • supports transparency
  • supports multiple frames for animation.
  • lossless compression only if the image contains very few colors
  • ideal for cartoonlike graphics, logos, graphics with transparent areas, and animations.
  • vector objects are often saved as GIFs
  • dithering or anti-aliasing GIF images produces larger files.

JPEG: Joint Photographic Experts Group developed specifically for photographic or high-color images.

  • supports millions of colors (24-bit).
  • produces higher quality for photographic image data.
  • best for scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors.
  • lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file. However, image data can sometimes be discarded with little or no noticeable difference in quality.

When exporting a JPEG using PhotoShop, use the Quality slider popup menu in the Optimize panel to control how much quality is lost when compressing the file.

  • A high percentage setting maintains image quality but compresses less, producing larger files.
  • A low percentage setting yields a small file, but produces a lower quality image.
  • Use the 2-Up and 4-Up previews to test and compare the appearance and estimated file size with different Quality settings for an exported JPEG.

PNG: Portable Network Graphic

  • versatile Web graphic format.
  • able to contain 8-bit indexed, 24-bit RGB, 16-bit grayscale and 48-bit color images
  • lossless compression retains image data
  • supports transparency
  • progressive display
  • gamma adjustment information
  • embedded text for attaching information
  • best for creating complex live transparency, high-color graphics, and better compressed low-color graphics.
  • native file format for Fireworks. However, Fireworks PNG files contain additional source information that is not saved when you export a PNG for use on the Web, so don't confuse a native Fireworks PNG file with an optimized PNG file.

SVG: Scalable Vector Graphics

  • Made up of shapes and paths that are defined mathematically
  • Instructions are written in a text file
  • Much smaller file than other image formats
  • Good for line drawings, simple shapes and text
  • Added inline using the <svg> tag (more on this later) in the html or embedded using the object tag:
    <object type="image/svg+xml" data="pizza.svg">
Obtaining images for your site
  • Use a photo from a digital camera
  • Scan in a physical image
  • Draw or create an image using graphics software
  • Buy ready-made images
  • Download an image from the web - making sure that it is not copyright protected!
  • Good source of free images is http://www.freeimages.com
  • You can also use Google google.com/images
Using google images
  1. Type in the name of the images you want to search.
  2. Click the Settings button and then click the Advanced Search button.
  3. Scroll down to usage rights.
  4. Select Free to use or share.
  5. These images should be ok to use on your site.
Optimization

Optimization is process to make web graphic file size as small as possible. Below are some strategies to achieve this goal.

Limit dimensions
Use an image editor to reduce image size. If you just use the size attributes to resize the image in the browser, the full-size image still has to be downloaded which can make the page load more slowly and increase data costs. It is better to reduce the size of the image in an editor as the file size will be significantly smaller. You can also use the crop tool to take out portions of the image to make it smaller.
Reuse and recycle
use the same image on multiple pages - even if it is a different size. The image only has to be downloaded once. For example, you may have a company logo that you put on all pages, but it is larger on your home page. Size the image for the larger home page, and then use the height and width attributes to reduce the size on the other pages. Once the browser has downloaded the file once, it will reuse the file from the cache and not have to download it again.
Design for compression
To improve image compression, limit the number of colors you use where practical if it doesn't affect overall quality and avoid gradients in gif and png files as it will significantly increase file size. Use web graphic tools to resize and optimize for the web.
Favicons
You have probably seen a favicon. They are the tiny graphics that appear next to the title of your web page in the title bar or tab for a website. You can also add an icon to be used on a phone or tablet touchscreen device. You can also use the favicon generator to create a full-set of favicons for use on different mobile devices.
To add a favicon to your site, create a 16x16 pixel image saved as favicon.ico in the root directory of your website. If you don't have a way to save a file as .ico, you can use the free tool at http://favicon-generator.org/. Then, in the head section of your webpage, add:
<link rel="shortcut icon" href="favicon.ico">
Thumbnail pictures
Thumbnail pictures are an excellent way to speed up the loading of your web pages. By creating a smaller picture, which therefore has a much smaller file size, the initial page will load much faster. The web page visitor can then see what the image is along with the rest of the page content and decide for themselves whether to click on it to see the larger, slower loading version. It is important to create a smaller file for your thumbnail picture. Don't just use the height and width to display the image smaller on the page, or the page load will take just as long as if you used the full size image.
Once you have created the smaller picture, you can make it a hyperlink to the full-size image. Simply create an tag with a hyperlink to the full-size image and place it in front of the <img> tag. Then put the closing tag after the <img> tag. Here's an example:

Sample Image

<a href="big-image.jpg"><img src="thumbnail.jpg" alt="Sample Image"></a>
Image Captions

Often images can benefit form text captions to help visitors understand the image better. Adding a caption is easy once you have included the image in a figure tag. See the example below.

<figure>
	<img src="space.jpg" alt="Sample Image">
	<figcaption>Raining Stars from Space</figcaption>
</figure>
Sample Image
Raining Stars from Space