Module 6: Images

Let's start out with a discussion of common image formats like JPEG, PNG, GIF, and SVG, and when to use each format based on factors like image type, quality, and transparency:

JPEG (Joint Photographic Experts Group):

Type: JPEG is a lossy compression format, best suited for photographs and images with many colors and gradients.
Quality: It allows for high compression, resulting in smaller file sizes. However, high compression may lead to a loss of image quality, especially in areas with fine details.
Transparency: JPEG doesn't support transparency. It always has a solid background color.
When to Use: Use JPEG for photographs and images where file size is a concern and some loss of quality is acceptable. It's commonly used for web images, especially in photography websites.

If you are interested in more about the JPEG / JPG format, this is a decent article.

PNG (Portable Network Graphics):

Type: PNG is a lossless compression format, ideal for images with sharp edges, text, or illustrations.
Quality: It maintains image quality without any loss during compression. This makes it suitable for images with text or graphics.
Transparency: PNG supports alpha transparency, allowing for variable levels of transparency in images. This is useful for creating images with soft edges or for overlaying on other content.
When to Use: Use PNG for images where preserving the highest quality and transparency is essential, such as logos, icons, and images with text overlays.

GIF (Graphics Interchange Format):

Type: GIF is a lossless or lossy compression format, mainly used for simple animations or images with limited color palettes.
Quality: It supports animations but has a limited color palette (256 colors). It may lead to a loss of quality for images with many colors.
Transparency: GIF supports binary transparency, where a single color can be made transparent.
When to Use: Use GIF for simple animations, like loading spinners or small, low-resolution graphics. It's also suitable for images with a limited color palette or when you need basic transparency.

SVG (Scalable Vector Graphics):

Type: SVG is a vector image format, which means it's not based on pixels but on mathematical descriptions of shapes and paths.
Quality: It's resolution-independent, meaning it can be scaled to any size without loss of quality. It's great for logos and icons.
Transparency: SVG supports alpha transparency, similar to PNG, allowing for variable transparency levels.
When to Use: Use SVG for graphics that need to be scaled to various sizes, such as logos and icons. It's also suitable for interactive graphics and illustrations that require animation or scripting.

Summary

In summary, choosing the right image format depends on the type of image you have and your specific requirements. Use JPEG for photographs, PNG for images with text or sharp edges, GIF for simple animations or low-color graphics, and SVG for scalable, resolution-independent graphics. Consider transparency and the need for animation when making your decision.

The <img> tag is an essential HTML element used to embed images in web pages. It allows you to display images within your HTML documents. Let's explore the structure of the <img> tag and its attributes, including different src values for local, remote, and relative paths:

Structure of the <img> Tag:

The <img> tag is an empty, self-closing tag, which means it doesn't have a closing tag. It is written like this:

<img src="image-source" alt="alternative-text" width="image-width" height="image-height">

Now, let's break down the attributes:

src (Source)

This attribute specifies the source (URL) of the image you want to display. You can provide different values for this attribute:

Local Image

If the image is stored on the same server or in the same directory as your HTML document, you can provide a relative path to the image file. 

For example:

<img src="images/my-image.jpg" alt="My Image">

Remote Image

If the image is hosted on another server or a content delivery network (CDN), you can provide the complete URL of the image.

For example:

<img src="https://example.com/images/remote-image.jpg" alt="Remote Image">

alt (Alternative Text)

This attribute is used to provide alternative text for the image. It is essential for accessibility and SEO. The text you provide here should describe the image's content for users who cannot see it. 

For example:

<img src="image-source.jpg" alt="A beautiful sunset over the ocean">

width 

This attribute sets the width of the image in pixels. It specifies the horizontal size of the image. For example:

<img src="image-source.jpg" alt="Sunset" width="300">

height

This attribute sets the height of the image in pixels. It specifies the vertical size of the image. For example:

<img src="image-source.jpg" alt="Sunset" height="200">

These are the core attributes of the <img> tag. You can also use additional attributes like title (to provide a tooltip), loading (for lazy loading), and style (for inline CSS) to customize how the image is displayed.

Remember to use a meaningful alt attribute, especially for accessibility, and choose appropriate width and height values to control the image's size on your web page. When specifying the src attribute, use the correct path or URL depending on whether the image is local or remote.

Aligning images on a page or within an HTML container is an important aspect of web design.  In the days before CSS was widely implemented, web designers would use the “align” attribute to let the browser know whether an image should be displayed on the left, right, or in the center of the page, instead of inline with the text it was a part of. The align attribute was used in older versions of HTML (HTML 4 and earlier) to align images horizontally within their containing elements. However, it's no longer considered a best practice, as it's deprecated in HTML5. Still, it's worth mentioning for historical reference:

• To align an image to the left within the text flow: <img src="image.jpg" alt="Image" align="left">
• To align an image to the right within the text flow: <img src="image.jpg" alt="Image" align="right">
• To center an image horizontally within its containing element: <img src="image.jpg" alt="Image" align="center">

In the next module, we will learn the CSS properties for aligning an image, along with several other useful image-related CSS properties.

Setting an image as the background of a web page without using CSS isn't a recommended practice for modern web development because CSS is the standard way to control the presentation and styling of web page elements, including backgrounds. However, for historical reference, you can use the following HTML tags and attributes to set an image as the background of a web page:

Using the <body> Tag and the background Attribute:

You can set a background image for the entire web page by using the <body> tag and the background attribute. This approach is considered outdated, and it's better to use CSS for this purpose.

<body background="background-image.jpg">
<!-- Your web page content goes here -->
</body>

<body>: This tag represents the main content of the web page.
background: The background attribute specifies the URL of the background image.

Please note that while these methods might technically work, they are not considered good practice in modern web development. Using CSS is the standard and more flexible way to control background images, allowing for better separation of content and presentation.