Introducere în Imagini HTML

Introduction to Images in HTML

• Images are crucial components in web design, enhancing visual appeal and providing context.
• Various image formats (JPEG, PNG, GIF, SVG) are supported, each with distinct characteristics.
• HTML utilizes the <img> tag to embed images within web pages.

The <img> Tag

• This tag is fundamental for displaying images on web pages.
• The src attribute specifies the image's URL, pointing to where the image file is located.
• The alt attribute is essential for accessibility. It provides alternative text that describes the image for users with visual impairments and search engine crawlers, and is displayed if the image cannot be loaded.
• The title attribute provides additional information about the image; hover over the image to see this text, it is often used for a tooltip.
• The width and height attributes set the dimensions of the image, impacting layout. Best practice is to let the browser scale the image, and use these only when necessary. Using these attributes can lead to display issues with different aspect ratios.

Image Formats

• JPEG (Joint Photographic Experts Group): Common format for photographs, emphasizing color quality. Lossy compression can impact image quality depending on the level chosen.
• PNG (Portable Network Graphics): Suitable for images with sharp details and transparency, often used for logos, icons, and graphics. Lossless compression, maintains image quality.
• GIF (Graphics Interchange Format): Supports animated images and transparency, but not high resolution images. Lossless compression.
• SVG (Scalable Vector Graphics): Vector-based graphics; not suitable for photos with many details, but have advantages in terms of resolution and scalability, and can be easily manipulated with CSS and JavaScript.

Alternative Text (alt Attribute)

• Crucial for accessibility, providing a textual substitute for images.
• Helps users with visual impairments and assistive technologies understand the image's content.
• Search engine crawlers use the alt text to understand the context of the image, improving SEO.
• Use brief, descriptive text, capturing the essence of the image.

Responsiveness and Display

• Images should be responsive to various screen sizes and devices, adapting to screen resolutions using CSS or responsiveness techniques like responsive images.
• Consider using max-width: 100%; property to avoid issues with layouts.
• Loading times can impact user experience; optimized images and effective caching strategies are important.

Embedding Images

• Include the relevant image file within the folder structure of your HTML page.
• Use relative file paths for images that are in the same directory; for images in a different directory, use the correct path relative to the HTML file.
• Image URLs are case-sensitive. If you link to an image called "Image.jpg" use that case if that is how the system has the name of the image.