Adding Images to your Website
Tag Protocol
The following is how a basic image tag looks in HTML:
<img src="roses.jpg" /><img>is the HTML elementsrc="images/photo.jpg"specifies the location of an image file to be included in the display of the Web page- The
<img />tag is an "empty" element - it has no closing sibling tag.
If the image can't be displayed, it's good to have an alt (alternative): <img src="roses.jpg" alt="Large Bouquet of Red Roses" />
You can tell the browser, up front, the size of an image in your page ... but it's not required: <img src="roses.jpg" alt="Large Bouquet of Red Roses" width="100" height="50" />
You can add a class to the <img />tag as well: <img src="roses.jpg" alt="Large Bouquet of Red Roses" class="alignLeft" />
Types
JPEG
The .jpg (or .jpeg) format works best for photos and complex graphics
- Works best for continuous tone images, like photographs
- Can represent images with up to 16 million different colors
- Is a "lossy" format because to reduce the file size, it throws away some information about the image
- Does not support transparency
GIF
The .gif format works best for images with solid colors, logos, and geometric shapes.
- Works best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images.
- Can represent images with up to 256 different colors.
- GIF also compresses the file to reduce its size, but doesn't throw anything away. So, it is a "lossless" format.
- Allows one background color to be set to "transparent" so that anything underneath the image will show through.
PNG
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. PNG is pronounced "ping"
PNG vs GIF
- PNG can achieve greater compression than GIF
- PNG gives a much wider range of transparency options than GIF
- PNG gives a much wider range of color depths than GIF (truecolor up to 48-bit compared to 8-bit 256-color), allowing for greater color precision, smoother fades, etc.
- GIF supports animation while PNG does not.
- PNG images are widely supported, but not as widely supported as GIF images.
PNG vs JPEG
- JPEG can produce a smaller file than PNG for photographic (and photo-like) images since it uses a lossy encoding method.
- PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions.
- JPEG is a poor choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not.
- PNG format is the optimal choice for exporting small, repeating gradients for web usage.