HTML Images
Images can improve the design and the appearance of a web page.
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag and has two required attributes.
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
Note that Writing.Com has its own tag for embedding images/photos and scaling images/photos.
{image:#######} for a full image embed
{image:#######-#%} for a scaled image embed
{photo:#######} or {fs-photo} for a full size photo
{xxxs-photo:#######} for a triple extra small size photo
{xxs-photo:#######} for a double extra small size photo
{s-photo:#######} for a small size photo
{m-photo:#######} for a medium size photo
{l-photo:#######} for a large size photo
{xl-photo:#######} for an extra large size photo
{xxl-photo:#######} for a double extra large size photo
{xxxl-photo:#######} for a triple extra large size photo
The difference between image and photo in Writing.com is that an Image is uploaded/saved into an image item whereas a photo is uploaded/stored in an Album item. An Image item can only have 1 image (available for users with Upgraded Membership) while an Album can have more than 1 photos (available for users with Premium Membership).
The src Attribute
The required src attribute specifies the path (URL) to the image.
IMPORTANT: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.
Example:
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image.
Example:
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute
TIP: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example:
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes.
Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in pixels.
IMPORTANT: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.
Width and Height, or Style?
The width, height, and style attributes are all valid in HTML. However, it is suggested to use the style attribute. It prevents styles sheets from changing the size of images.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute.
Example:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server/Website
Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the src attribute.
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
IMPORTANT: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.
Animated Images
HTML allows animated GIFs.
Example:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag.
Example:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text.
Example:
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property.
Example:
Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
You can also specify the background image in the <style> element, in the <head> section.
Example:
Specify the background image in the <style> element.
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the <body> element.
Example:
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element.
Example:
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, set the background-repeat property to no-repeat.
Example:
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Background Cover
If you want the background image to cover the entire element, you can set the background-size property to cover. Also, to make sure the entire element is always covered, set the background-attachment property to fixed. This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions).
Example:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%. By resizing the browser window, you will see that the image will stretch, but always cover the entire element.
Example:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style> |
