Scribd
Upload
17 views

Web Images

The document discusses different types of images used on web pages including JPEGs, GIFs and PNGs. It explains that JPEGs are best for photos, GIFs are good for logos with a limited color palette, and PNGs can have more colors but may not be fully supported by older browsers. The document also covers including images in HTML using the <img> tag and attributes like src, width, height and alt.

Uploaded by

Daleks 214
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Web Images

The document discusses different types of images used on web pages including JPEGs, GIFs and PNGs. It explains that JPEGs are best for photos, GIFs are good for logos with a limited color palette, and PNGs can have more colors but may not be fully supported by older browsers. The document also covers including images in HTML using the <img> tag and attributes like src, width, height and alt.

Uploaded by

Daleks 214
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Images

Things might seem a little bland and boring with all of this text formatting. Of course, the web is not
just about text, it is a multi-media extravaganza and the most common form of sparkle is the image.
The img tag is used to put an image in an HTML document and it looks like this:

<img src="http://www.shawacademy.com/badge1.gif" width="120"


height="90" alt="HTML tag">

The attribute tells the browser where to find the image. Like the tag, this can be absolute, as the
above example demonstrates, but is usually relative. For example, if you create your own image and
save it as “alienpie.jpg” in a directory called “images” then the code would be <img
src="images/alienpie.jpg"...

The width and height attributes are necessary because if they are excluded, the browser will tend to
calculate the size as the image loads, instead of when the page loads, which means that the layout of
the document may jump around while the page is loading.
The alt attribute is the alternative description. This is an accessibility consideration, providing
meaningful information for users who are unable to see the image (if they are visually impaired or
have disabled images in their browser, for example).

Note that, like the br tag, because the img element does not enclose any content, no closing tag is
required.

The construction of images for the web is a little outside of the remit of this website, but it is worth
noting a few things…

The most commonly used file formats used for images are JPEGs, GIFs, and PNGs. They are
compressed formats, and have very different uses.

A JPEG (pronounced “jay-peg”) uses a mathematical algorithm to compress the image and will distort
the original slightly. The lower the compression, the higher the file size, but the clearer the image.

11
JPEGs are typically used for images such as photographs.
A GIF (pronounced “jif”) can have no more than 256 colors, but they maintain the colors of the
original image. The lower the number of colors you have in the image, the lower the file size will be.
GIFs also allow any pixel in the image to be transparent.

GIFs are typically used for images with solid colors, such as icons
or logos.
A PNG (pronounced “ping”) replicates colors, much like a GIF, but allows 16 million colors as well as
alpha transparency (that is, an area could be 50% transparent).

PNGs are typically used for versatile images in more complex


designs BUT they are not fully supported by some older browsers.
The web is forever getting faster and faster but you obviously want your web pages to download as
quickly as possible. Using super-high resolution images isn’t doing your or your user’s bandwidth (or
patience) any favors. Image compression is a great tool and you need to strike a balance between
image quality and image size. Most modern image manipulation programs allow you to compress
images and the best way to figure out what is best suited for yourself is trial and error.

12

You might also like