A website without images is often considered boring.
Do you agree?
Yes, we concur.
Images significantly enhance the visual appeal of a website. Our brains process visual information more efficiently than text alone, making images a crucial element for engaging content.
Therefore, understanding how to incorporate images is fundamental in web development.
In this tutorial, we will explore how to embed images in HTML, specifically focusing on Coding Cara Memasukkan Gambar Dari Folder – or in English, embedding images from folders.
Let’s dive in.
Adding Images in HTML
Images are added in HTML using the <img> tag. This tag requires a crucial attribute: src (source).
Without the src attribute, the image will not be displayed.
The image URL in the src attribute can be either a web URL or a local file path. The <img> tag is a self-closing tag, indicated by the trailing slash.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of a rice field:</p>
<p>
<img src="ricefield.jpg" alt="Rice Field Landscape"/>
</p>
</body>
</html>Result:
Important Note:
In the example above, we directly used the filename “ricefield.jpg”. This works because the image file is located in the same folder as the HTML file.
If your image file is located in a different folder, you need to specify the correct file path.
For instance, if we store the image in a folder named “images”:
Then, in your HTML, you would write the src attribute like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of a rice field:</p>
<p>
<img src="images/ricefield.jpg" alt="Rice Field Landscape"/>
</p>
</body>
</html>The result will be the same as the previous example.
What if the image is hosted on the internet or another website?
When using images from other websites, you need to provide the complete URL of the image in the src attribute.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of Borobudur Temple:</p>
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" alt="Borobudur Temple"/>
</p>
</body>
</html>Result:
Easy, right?
Next, we will explore the image file formats supported by HTML and other useful attributes for the <img> tag.
Let’s continue.
Image File Formats for HTML
Not all image file formats are compatible with HTML. Different image formats serve different purposes.
For example, PSD files are native Photoshop files and are not designed for web display.
So, which formats are supported by HTML?
Here’s a list of common image formats used on the web:
| Format Name | Full Name | Extension(s) |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Experts Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
| WebP | Web Picture | .webp |
Support for these formats can also depend on the browser version being used.
For instance, WebP is a newer image format developed by Google. Older browsers might not support displaying WebP images.
Attributes for the <img> Tag
Several attributes are commonly used with the <img> tag:
alt: Provides alternative text for the image.width: Specifies the width of the image.height: Specifies the height of the image.style: Allows you to apply CSS styles directly to the image.
Let’s examine each one.
alt Attribute
The alt attribute provides alternative text for an image. This text is displayed if the image fails to load.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of Borobudur Temple:</p>
<p>
<img src="" alt="Borobudur Temple Description"/>
</p>
</body>
</html>Result:
In this example, we intentionally left the src attribute empty. As a result, the image fails to load, and the alternative text specified in the alt attribute is displayed instead.
Is the alt attribute mandatory?
Technically, it’s not strictly required, but it is highly recommended to always use it. The alt text is crucial for accessibility, as it is read by screen readers used by visually impaired users.
Furthermore, the alt attribute is also important for SEO, as it provides search engines with textual context about the image, and can be used to incorporate relevant keywords.
width and height Attributes
The width and height attributes define the dimensions of the image in pixels.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of a rice field with different sizes:</p>
<p>
<img src="images/ricefield.jpg" width="200" height="150" alt="Rice Field Small"/>
<img src="images/ricefield.jpg" width="150" height="100" alt="Rice Field Medium"/>
<img src="images/ricefield.jpg" width="50" height="50" alt="Rice Field Large"/>
</p>
</body>
</html>Result:
The units for width and height are pixels (px). Setting width="200" is equivalent to 200px.
While not mandatory, using width and height attributes is good practice to ensure consistent image sizing and improve page layout stability as the image loads.
style Attribute
The style attribute allows you to apply CSS styles directly to an HTML element. It’s often used with images to add specific styling or effects.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Styling Images in HTML</h1>
<p>Here is an image of a rice field with different styles:</p>
<p>
<img src="images/ricefield.jpg" style="width: 160px; border: 3px solid red;" alt="Rice Field with Red Border"/>
<img src="images/ricefield.jpg" style="width: 160px; border-radius: 10px;" alt="Rice Field with Rounded Corners"/>
<img src="images/ricefield.jpg" style="width: 100px; height: 100px; border-radius: 100%;" alt="Circular Rice Field"/>
</p>
</body>
</html>Result:
Observe the images above ☝️.
The first image has a solid red border of 3 pixels.
The second image uses border-radius to create rounded corners.
The third image uses border-radius: 100% to create a circular image.
Setting an Image as a Background
While technically a CSS topic, it’s relevant to briefly cover setting images as backgrounds here.
To use an image as a background, you need to use CSS with the background-image property and set its value to the URL of your image.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body style="background-image: url(images/ricefield.jpg);">
<h1>Background Image</h1>
<p>This page uses an image as a background.</p>
</body>
</html>Result:
Creating Image Links
We previously discussed creating links in HTML in the HTML Link Tutorial, but let’s revisit creating image links for clarity.
To make an image clickable, you need to wrap the <img> tag within an <a> (anchor) tag. The <a> tag will act as the hyperlink, and the <img> tag will be the clickable content.
Example:
Result:
(This would display an image of a rice field that, when clicked, navigates to “https://www.carcodescanner.store“)
Creating Clickable Areas within an Image
You can create links on specific parts of an image using the <map> and <area> tags.
Example:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Image with Clickable Areas</h1>
<p>Touch and click on different parts of this image:</p>
<p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace Image with clickable areas" usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer Area" href="#!">
<area shape="rect" coords="290,172,333,250" alt="Phone Area" href="#!">
<area shape="circle" coords="337,300,44" alt="Coffee Area" href="#!">
</map>
</p>
</body>
</html>Result:
(This would display an image of a workplace with a computer, phone and coffee cup. Each area is clickable and would lead to the specified href – in this example, ‘#!’ which means no action.)
Additional Tags for Images in HTML
HTML5 introduced additional tags that enhance the functionality of the <img> tag.
These include:
<figure>: To wrap an image and its caption.<picture>: To specify different image sources for different screen sizes.
Let’s explore them:
<figure> Tag
The <figure> tag is used to encapsulate an <img> tag or other media content along with its caption. The caption is typically provided using the <figcaption> tag.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Here is an image of a rice field with a caption:</p>
<p>
<figure>
<img src="images/ricefield.jpg" width="300" alt="Rice Field Landscape with Caption"/>
<figcaption>Rice field landscape under a clear sky</figcaption>
</figure>
</p>
</body>
</html>Result:
<picture> Tag
In today’s mobile-first era, websites are accessed on various devices, from large desktop screens to small smartphones.
Screen sizes vary significantly, making responsive web design crucial. Websites need to adapt to different screen sizes for optimal viewing.
The <picture> tag addresses this by allowing you to define different image sources to be displayed based on screen size or other media conditions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<title>Image Example in HTML</title>
</head>
<body>
<h1>Displaying Images in HTML</h1>
<p>Responsive images using the <picture> tag:</p>
<p>
<picture>
<source media="(min-width: 650px)" srcset="images/ricefield.jpg">
<source media="(min-width: 450px)" srcset="images/ricefield-sm.jpg">
<img src="images/ricefield.jpg" alt="Responsive Rice Field Image">
</picture>
</p>
</body>
</html>Result:
(This would display “images/ricefield.jpg” for screens wider than 650px, “images/ricefield-sm.jpg” for screens wider than 450px but less than 650px and “images/ricefield.jpg” for screens smaller than 450px. You would need to have “ricefield-sm.jpg”, a smaller version of the ricefield image in the images folder for this example to fully work)
What’s Next?
So far, you’ve learned how to display images in HTML. The key takeaway is understanding how to use the <img> tag effectively.
Next, you should explore:
