UI Tutorial
UI Tutorial

How to insert image in html

The HTML <IMG> tag is used to display an image on the web page.
closing tags aren't used in the HTML img tag.

Images displayed using the IMG tag.

One of the most used ones in HTML. It's very easy and simple to use.

Don't necessarily width and height attribute reflect the actual size of the image.

The <img> tag has two important attributes

  1. src Attribute
  2. alt Attribute

#src - Specifies the path to the image

#Alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

HTML to image tag

HTML image tag Example


<!DOCTYPE html>
<html>
<head>
   <title>Image Tag</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <img src="assets/images/image-tag.jpg" alt="image-tag">
</body>
</html>

               

Output here.

The HTML for image Attribute

Attribute names and values are separated by an equal sign (=)

HTML image src

  • The Src Attribute this stands for source it tells your IMG HTML
  • your image URL goes between quotes.
  • First and a very important source attribute the source attribute tells the browser where the image is located.
  • The source attribute we are willing to add the image location. this can be the link, an external link, or else the file name of the image.
  • Use src indicate the source and src value indicate the location of the image or image filename
  • HTML images Img tag required attribute src means presentation transcript

The HTML image alt Attribute

  • alt attribute indicate for the image description
  • The alt-text is displayed for the missing image.
  • The alt attribute is used for some reason when the image is broken.
  • one another attribute alt which is alternative text the purpose of adding this attitude if the images not loaded properly the text inside this alt tag is shown on our webpage.
  • we are placing the text "Image missing" inside the alt attribute.
  • It's important to User is what's inside the image if we get broken image for some reason.

HTML image add alt Attribute Code

Example


<!DOCTYPE html>
<html>
<head>
   <title>alt attributes</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <img src="assets/images/image-tag" alt="Image missing alternate text">
</body>
</html>

               

Output here.

#Tips

Remember that the ALT attribute is very important for Google for the SEO of your webpage.

HTML image size - image width and image height Attributes

The HTML image width and HTML image height attributes specify the size of the image in pixels.

How to reduce the HTML image size

Actually image is inserted in our webpage but its size is large but when you can use width and height attribute this image size is reduced.

images size in pixels correctly, in other words, giving them the right width and height when you save them. reduce image dimensions the size of the image you should use depends on the display size and the user's device. create two versions of this image, a medium one and a small one You should use source set with all of your images.
  1. You can reduce the image by setting to make your website faster.
  2. Images size in pixels correctly, in other words, giving them the right width and height when you save them.
  3. Reduce image dimensions the size of the image you should use depends on the display size and the user's device.
  4. Create two versions of this image, a small one and a medium one you should use source set with all of your images.

HTML image resize code

Example


<!DOCTYPE html>
<html>
<head>
   <title>Reduce the size of the image</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <h2>Original image size</h2>
   <img src="assets/images/ui-tutorial.jpg" alt="image-tag">
   <hr>
   <h2>Reduce image size using width and height attribute</h2>
   <img src="assets/images/Ui-tutorial.jpg" alt="image-tag" width="300" height="228">
</body>
</html>

               

Output here.

The Title Attribute

Text that appears when you hover over image

Title Attribute for Tooltip.

HTML image title attribute code

Example



<!DOCTYPE html>
<html>
<head>
   <title>Reduce the size of the image</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <h2>Title Attribute</h2>
   <img src="assets/blog/business.jpg" alt="image-tag" title="image Tooltip">
   <h2>Title Attribute for Tooltip.</h2>
</body>
</html>

               

Output here.

HTML image Detail

The three most widely used formats on the Web are GIF, PNG, and JPEG. Current browsers can view all three popular image formats

HTML image to png File Format

PNG is often the better choice because it has better for smaller file sizes.
PNG lossless formats, so they can compress your images without losing quality. like logos and rendered text, and best for this. Transparency purpose.

Animated HTML image gif

Animated image Extention as GIFs.

HTML favicon Image

The small icon that you see in address bars, tabs, and bookmarks is known as a favicon, which is short for favorites icon.

  1. Favicons should generally be saved in the ICO format
  2. You can also create favicons in the PNG and GIF formats.

Example


<!DOCTYPE html>
<html>
<head>
   <title>Image Tag</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="assets/logo/favicon.png" />
</head>
<body>
   <h1>The small icon that you see in address bars and tabs.</h1>
</body>
</html>

               

Output here.

HTML image css

image Style Example



<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <img src="assets/images/uitutorial.jpg" alt="image-style" style="border:10px solid orange;padding: 10px;">
</body>
</html>



               

Output here.

The <a> tag used for adding link.

The used image inside the <a> tag and use an image as a hyperlink.

The link clicks one page to another page. you can move the mouse over the link and the mouse arrow automatically turn pointer behavior.

Example

   

<!DOCTYPE html>
<html>
<head>
   <title>HTML image link</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <a href="https://uitutorial.com"><img src="assets/images/uitutorial.jpg" alt="uitutorial"></a>
</body>
</html>


               

Deprecated Attributes

Not supported in HTML5.

1) align

The align of the image values left, right, top, bottom, middle.

2) border

Defines the width of the border

3) hspace


4) vspace

Supported Image Formats

Abbreviation File Format File Extension Browser Compatibility
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG Portable Network Graphics .png Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIF Graphics Interchange Format .gif Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
APNG Animated Portable Network Graphics .apng Chrome, Edge, Firefox, Opera, Safari
BMP Bitmap file .bmp Chrome, Edge, Firefox, Safari, Internet Explorer, Opera
ICO Microsoft Icon .ico Chrome, Edge, Firefox, Safari, Internet Explorer, Opera
SVG Scalable Vector Graphics .svg Chrome, Edge, Firefox, Safari, Internet Explorer, Opera

#Tips

Most browsers don’t automatically wrap long lines. it’s a good idea to keep it under 50 characters

The alt attribute is required for all image elements in HTML5.

#Tips

If you have multiple images that are the same size, you can set their height and width at a time with CSS styles.

#Tips

Don't necessarily width and height attribute reflect the actual size of the image.

#Tips

Find the size of an image in a browser by opening the image in its own window. The size is shown in the title bar.

Related Post

What is an HTML Inline style?

folder  HTML

An inline style is used to apply a unique style to a single HTML element. HTML Inline Style CSS is inside of an HTML tag, using the style attribute, it’s called an “inline-style”.

Read article   

HTML with CSS

folder  HTML

Cascading Style Sheets is a style sheet language used for formatting of HTML pages.

Read article   

What is an HTML boilerplate

folder  HTML

>Popular HTML boilerplates are similar to basic empty templates. The HTML5 Boilerplate base to start your web page.

Read article