HTM-02100 | What is the element?
- The
<img>
element defines an image in an HTML page. - The
<img>
element has two required attributes:src
andalt
. - The required
src
attribute specifies the URL of the image. - The
alt
attribute defines the alternative text describing the image. This helps for while the image is loading or for visually impaired users to experience the page as it was meant to be. - The
<img>
is a self closing tag <img src="images/logo.png" alt="crazy fish man emporium logo">
Click here to view an IMG
element example.
What kind of <IMG> goes online?
- There are several types of IMG files, and sometimes it’s hard to designate which ones to use in what instances.
- The four types of IMG files you can utilize with HTML are JPEG, PNG, SVG and GIF.
- All images are created with pixels. Pixels are the smallest element of light or color on a device displaying images.
JPEG
- JPEG was developed by the Joint Photographic Experts Group. I can be an 8, 16 or even 24-bit image that supports 16.7 million colors, which is why it is used for digital photos and other pictures with a high level of detail or color complexity, such as shadows.
- This makes JPEG very ‘photo-friendly’. This is partly why it is a standard format when it comes to most digital cameras on the market. It has a million color pallet to choose from. While JPEG is well suited to compressing and rendering photography, it is a lossy compression type which means it’s less useful for ongoing editing of an image. Exporting a JPEG results in a loss of quality, and these losses get worse with each successive export – like a photocopy of a photocopy. This is why professional photographers generally shoot in lossless RAW format. Choose to save as a JPEG if a still image, photography, and images with dynamic colors and complex pixel makeup.
- Use JPEG for still images and complex photographs.
- GIF
- GIF (Graphics Interchange Format) was developed by CompuServe. It is an 8-bit format. The GIF format is a type of bitmap, but unlike JPEG or PNG, GIF files are limited to a maximum palette of 256 colors. Essentially each GIF image contains a preset ‘box of crayons’ and there is no way to truly mix those colors to make new colors. While GIF is generally a poor choice for images with wide color variation, that 256 color limit can help keep file sizes small which is ideal for even the slowest of internet speeds. For many years, GIF provided the web’s only transparency option – though PNG and SVG now offer this too.
Due to its small size it is ideal for navigation menus and small icons. - Also GIF is used for simple animations, graphics with flat colors, graphics without gradients.
- PNG
- There are two different forms of PNG.
- 1. The first form of PNG is PNG-8. PNG-8 is similar to GIF in many ways and uses the same 256 color palette (maximum). It has better transparency options and usually exports slightly smaller file sizes. However, PNG-8 has no animation function. PNG-8 is a 8-bit format.
- Use PNG-8 for smaller images such as icons and other images you need to easily load.
- 2. The second form of PNG is PNG-24. PNG-24 is similar to JPEG as it uses an unlimited color palette, but it also offers the ability to preserve transparency. Because PNG-24 is a lossless format file type, you are likely to get larger files, but if image quality is more important than file size, PNG-24 is your best option. Compared to their cousin JPEG, PNG-24 files are not as universally compatible with every app and platform which makes the format marginally less ideal for web sharing. However, it is capable of being edited without diminished qualities. Use PNG-24 for more complex images you need to require transparent background,
- SVG
- SVG (Scalable Vector Graphics) is not a pure bitmap format. Instead it is a vector format. Sometimes it’s helpful to think of SVG as ‘HTML for illustrations’ and you need to think about it quite differently to other image formats we’ve listed. Written in an XML-based markup, your SVG can be edited in any text editor and modified by JavaScript or CSS. As vectors can be scaled to any size while retaining crisp image quality, they are ideal for responsive design. It is a lossless form of image. This has a million color palette.
Use SVG for logos and icons, graphics that need to be displayed in multiple sizes and screens, graphics that respond to their devices, and graphics that need to be updated frequently.
{post_title}
{post_content}
{associated_insight_resource.post_title}
{associated_insight_resource.resource_link}
{associated_insight_resource.insight_type }