Working with Images
<img src="image_source" alt="image_description">html
src: Specifies the image source (URL or path).alt: Provides alternative text for accessibility and cases where the image fails to load.
Use relative paths when referencing images within your project structure: The image file is in the same directory or a subdirectory of your HTML file
<img src="images/photo.jpg" alt="Local image"><img src="../images/photo.jpg" alt="Image in parent directory">html
External images require complete URLs: The image is hosted on a different domain or server.
<img src="https://example.com/images/photo.jpg" alt="External image">html
You can control the size of an image using the width and height attributes or via CSS.
<img src="image.jpg" alt="Sized image" width="800" height="600">html
Control image loading for performance optimization:
<img src="image.jpg" alt="Lazy loaded image" loading="lazy">html
The loading attribute accepts three values:
eager: Load immediately (default)lazy: Defer loading until near viewportauto: Browser determines loading strategy
There are various image formats that HTML supports, each suited for different types of images:
- JPEG (.jpg or .jpeg): Best for photographs or images with many colors. Supports lossy compression.
- PNG (.png): Best for images that require transparency or images with sharp edges (e.g., logos).
- GIF (.gif): Used for animations or images with fewer colors.
- SVG (.svg): Scalable vector graphic, used for logos and icons that can scale without losing quality.
- WebP (.webp): A modern format offering both lossless and lossy compression with smaller file sizes.