When building web pages, one essential element is displaying images. To display images on a web page, you use the <img> tag. In this material, we will delve into the <img> tag, understand how to display images, and explore image attributes.
目次
Basic Structure of the <img> Tag
The <img> tag is used to embed images in HTML documents, and its basic structure is as follows:
<img src="image-file-path" alt="alternative-text">
srcattribute: Specifies the path to the image file you want to display. This attribute is required.altattribute: Specifies the alternative text that will be displayed if the image cannot be shown or when a screen reader is used. This attribute is crucial for accessibility.
For example, using the <img> tag as shown below will display an image with the file path “sample.jpg” and alternative text “Sample Image”:
<img src="sample.jpg" alt="Sample Image">
Specifying Image File Paths
When displaying images with the <img> tag, it is important to correctly specify the path to the image file. There are different ways to specify image file paths, including:
- Absolute Paths: Specify the path from the web server’s root directory. For example,
<img src="/images/sample.jpg">will display the “sample.jpg” image from the “images” folder in the web server’s root directory. - Relative Paths: Specify a path relative to the current HTML file. For example,
<img src="images/sample.jpg">will display the “sample.jpg” image located in the “images” folder relative to the current HTML file.
It’s crucial to be careful with path specifications, as incorrect paths will result in images not being displayed.
Importance of Alternative Text (alt Attribute)
The <img> tag requires the provision of alternative text (alt text) for cases where the image cannot be displayed or when screen readers are used. Alternative text is a brief description of the image’s content. Alternative text serves several purposes, including:
- Displaying when the image is not found
- Appearing when users have disabled image display
- Being read aloud by screen readers (important for accessibility)
You can specify alternative text using the alt attribute, as shown in the following example:
<img src="sample.jpg" alt="Sample Image">
By providing appropriate alternative text, you contribute to improved user experiences and ensure accessibility.
Image Formats
There are various image formats available for different use cases. Here are some commonly used image formats:
| Format | Description |
|---|---|
| JPEG | Suitable for images with many colors, making it ideal for photographs. |
| PNG | Ideal for images with fewer colors, such as illustrations and logos. Supports transparency. |
| GIF | Used for short animations, similar to flipbooks. |
| SVG | Scalable Vector Graphics; ideal for vector-based graphics and icons. |
| WebP | A next-generation format that offers smaller file sizes compared to JPEG and PNG. Supports animations. |
About the WebP Format
WebP is an ideal image format as it provides smaller file sizes, supports animations, and is considered a next-generation format. While browser support for WebP was initially limited, as of October 2023, major browsers have adopted it. You can check the current browser support status on Can I Use.
Google has stated that site speed, which includes factors like image loading times, has an impact on SEO. Therefore, optimizing image file sizes by compressing them or changing image formats can have significant SEO benefits. When images with large file sizes are used, they can negatively affect SEO. Remember that improving site speed by reducing image file sizes is a valuable SEO strategy.
Learn Frontend with Skilled
At Skilled, we offer a specialized, practical programming learning service focused on frontend development.
We cover everything from coding to becoming a frontend engineer. Our service emphasizes practical learning while coding, ensuring that you gain “skills” rather than just knowledge.
We’re currently running a free trial campaign. If you’re interested, we encourage you to take advantage of this free trial.
