Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
64 views

HTML Images

The document discusses HTML images and provides examples of how to use the <img> tag to embed images in web pages. Key points include: 1) The <img> tag is used to embed images and contains src and alt attributes but no closing tag. The src attribute specifies the image path and alt provides alternate text. 2) Images can be styled with width, height, and other CSS properties. Floating images left or right positions them next to text. 3) Common image formats are JPG, PNG, GIF and SVG. The alt text is shown if the image fails to load.

Uploaded by

Sanando Banerjee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

HTML Images

The document discusses HTML images and provides examples of how to use the <img> tag to embed images in web pages. Key points include: 1) The <img> tag is used to embed images and contains src and alt attributes but no closing tag. The src attribute specifies the image path and alt provides alternate text. 2) Images can be styled with width, height, and other CSS properties. Floating images left or right positions them next to text. 3) Common image formats are JPG, PNG, GIF and SVG. The alt text is shown if the image fails to load.

Uploaded by

Sanando Banerjee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

3/17/23, 5:41 PM HTML Images

 Bootcamp Menu  Sign Up Log in


Dark mode

Dark code
  HTML CSS   

HTML Images
❮ Previous Next ❯

Images can improve the design and the appearance of a web page.

https://www.w3schools.com/html/html_images.asp 1/15
3/17/23, 5:41 PM HTML Images

Example

<img src="pic_trulli.jpg" alt="Italian Trulli">

Try it Yourself »

Example

<img src="img_girl.jpg" alt="Girl in a jacket">

Try it Yourself »

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

Try it Yourself »

HTML Images Syntax


https://www.w3schools.com/html/html_images.asp 2/15
3/17/23, 5:41 PM HTML Images

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.

The <img> tag has two required attributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image

Syntax

<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Note: 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">

Try it Yourself »

ADVERTISEMENT

https://www.w3schools.com/html/html_images.asp 3/15
3/17/23, 5:41 PM HTML Images

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">

Try it Yourself »

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Try it Yourself »

https://www.w3schools.com/html/html_images.asp 4/15
3/17/23, 5:41 PM HTML Images

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;">

Try it Yourself »

Alternatively, you can use the width and height attributes:

Example

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Try it Yourself »

The width and height attributes always define the width and height of the image in
pixels.

Note: 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?


https://www.w3schools.com/html/html_images.asp 5/15
3/17/23, 5:41 PM HTML Images

The width , height , and style attributes are all valid in HTML.

However, we suggest using 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>

Try it Yourself »

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;">

Try it Yourself »

https://www.w3schools.com/html/html_images.asp 6/15
3/17/23, 5:41 PM HTML Images

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">

Try it Yourself »

Notes on external images: 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;">

Try it Yourself »

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

https://www.w3schools.com/html/html_images.asp 7/15
3/17/23, 5:41 PM HTML Images

Example

<a href="default.asp">

  <img src="smiley.gif" alt="HTML tutorial"


style="width:42px;height:42px;">

</a>

Try it Yourself »

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>

Try it Yourself »

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats


Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera):

https://www.w3schools.com/html/html_images.asp 8/15
3/17/23, 5:41 PM HTML Images

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,


image .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Chapter Summary
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

Note: Loading large images takes time, and can slow down your web page. Use
images carefully.

HTML Exercises

Test Yourself With Exercises

Exercise:

https://www.w3schools.com/html/html_images.asp 9/15
3/17/23, 5:41 PM HTML Images

Use the HTML image attributes to set the size of the image to 250 pixels wide
and 400 pixels tall.

<img src="scream.png" ="250" ="400">

Submit Answer »

Start the Exercise

HTML Image Tags


Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

❮ Previous Next ❯

ADVERTISEMENT

https://www.w3schools.com/html/html_images.asp 10/15
3/17/23, 5:41 PM HTML Images

COLOR PICKER

https://www.w3schools.com/html/html_images.asp 11/15
3/17/23, 5:41 PM HTML Images




Get certified

by completing

a HTML

course today!

school
w3 s

3
CE

02

TI 2
R

FI .
ED

Get started

ADVERTISEMENT

https://www.w3schools.com/html/html_images.asp 12/15
3/17/23, 5:41 PM HTML Images

ADVERTISEMENT ADVERTISEMENT

Report Error
https://www.w3schools.com/html/html_images.asp 13/15
3/17/23, 5:41 PM HTML Images

Spaces

Upgrade

Newsletter

Get Certified

Top Tutorials
HTML Tutorial

CSS Tutorial

JavaScript Tutorial

How To Tutorial

SQL Tutorial

Python Tutorial

W3.CSS Tutorial

Bootstrap Tutorial

PHP Tutorial

Java Tutorial

C++ Tutorial

jQuery Tutorial

Top References
HTML Reference

CSS Reference

JavaScript Reference

SQL Reference

Python Reference

W3.CSS Reference

Bootstrap Reference

PHP Reference

HTML Colors
Java Reference

Angular Reference

jQuery Reference

Top Examples
HTML Examples

CSS Examples

JavaScript Examples

How To Examples

SQL Examples

Python Examples

W3.CSS Examples

Bootstrap Examples

PHP Examples

Java Examples

XML Examples

jQuery Examples

Get Certified
https://www.w3schools.com/html/html_images.asp 14/15
3/17/23, 5:41 PM HTML Images

HTML Certificate

CSS Certificate

JavaScript Certificate

Front End Certificate

SQL Certificate

Python Certificate

PHP Certificate

jQuery Certificate

Java Certificate

C++ Certificate

C# Certificate

XML Certificate

FORUM |
ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content.
While using W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.

https://www.w3schools.com/html/html_images.asp 15/15

You might also like