To embed an image to a web page use the\u00a0<img>\u00a0tag.<\/p>\n\n\n\n
The <img> tag supports a number of required and optional attributes, which give additional information about it.<\/p>\n\n\n\n
Syntax<\/h2>\n\n\n\n
The <img> tag is empty, which means that the closing tag isn\u2019t required. It contains only attributes. But in\u00a0XHTML, the (<img>) tag must be closed (<img\/>).<\/p>\n\n\n\n
Required Image Attributes – src and alt<\/h2>\n\n\n\n
The src (source) attribute specifies the name or the location of the image to be displayed. The value of src attribute should contain the name of the image file or its URL.<\/p>\n\n\n\n
The alt attribute is also required for the <img><\/strong> tag. It is used to provide browsers with an alternate text in case when the image cannot be displayed (in case of slow connection, when a screen reader is used, etc). Browsers often display the alternative text of the image as a pop-up when you put your mouse over it.<\/p>\n\n\n\n
Syntax of the <img> tag with required src and alt attributes will look like this:<\/p>\n\n\n\n
Use alt attribute for all your images to provide keyword-rich description for search engines to improve rankings of your web pages.<\/p>\n\n\n\n
Recommended Image Attributes – width and height<\/h2>\n\n\n\n
The width and height attributes are strongly recommended to use with <img> tag. If these attributes are used, the browser reserves the place for the image when loading the content, and this speeds up rendering the page.<\/p>\n\n\n\n
Example of the HTML <img> tag with the src, alt, width and height attributes:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>Place for your heading <\/h1>\n <p>This is Aleq's photo<\/p>\n <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"Aleq\" width=\"200\" height=\"185\"\/>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Result<\/h3>\n\n\n\n<\/figure>\n\n\n\n
Instead of using the width and height dimensions, you could set the size using CSS\u00a0max-width\u00a0or\u00a0max-height\u00a0properties to get extra flexibility. This can prevent large images from ruining your layout on a device with a small screen.<\/p>\n\n\n\n
Image Floating<\/h2>\n\n\n\n
Generally, the text is above an image, by default. But the position of the image and text can easily be changed with the\u00a0CSS float property\u00a0. This property specifies how the image should float, or how the text should be wrapped around it.<\/p>\n\n\n\n
To show the picture on the left side, and text on the right side, add style=”float:left” to the <img> tag.<\/p>\n\n\n\n
Example of the <img> tag and the CSS float property for floating an image to the left:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>Place for your heading <\/h1>\n <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"Aleq\" width=\"200\" height=\"185\" style=\"float:left\"\/>\n <p>Aleq's photo<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Adding style=”float:right” attribute to the <img> tag positions the text to the left, and the image to the right.<\/p>\n\n\n\n
Example of the <img> tag and the CSS float property for floating an image to the right:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>Place for your heading <\/h1>\n <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"Aleq\" width=\"200\" height=\"185\" style=\"float:right\"\/>\n <p>Aleq's photo<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Result<\/h3>\n\n\n\n<\/figure>\n\n\n\n
How to add hyperlink to an image<\/h2>\n\n\n\n
As the\u00a0<a>\u00a0tag is used for inserting hyperlinks, you just need to put the image in the <a> tag to make your image clickable.<\/p>\n\n\n\n
Example of the <a> and <img> tags for adding a hyperlink to an image:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <a href=\"https:\/\/www.w3docs.com\/\" aria-label=\"w3docs homepage\">\n <img src=\"\/uploads\/media\/default\/0001\/01\/0710cad7a1017902166203def268a0df2a5fd545.png\" width=\"190\" height=\"45\" alt=\"logo\"\/>\n <\/a>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
What image format to choose for web<\/h2>\n\n\n\n
There are three main types of image formats supported by browsers:<\/p>\n\n\n\n
GIF<\/strong> has 256 unique colors that make simple and fast-loading graphics. You can use GIF for small drawings, diagrams, charts, buttons, and other simple graphics, that won\u2019t prevent your page from loading fast.<\/p>\n\n\n\n
JPEG<\/strong> being a 16-bit format can blend red, blue and green light to display millions of colors. Thus it is used mainly for photographs. This format gives you the flexibility to choose how much to compress your image \u2013 from 0% (heavy compression) to 100% (no compression). You can choose this format if you don\u2019t mind giving up some quality for a reduction in size. Avoid using JPEG for images with text, shapes, or large color blocks, because when the file is compressed, the lines will blur and colors will shift.<\/p>\n\n\n\n
PNG<\/strong> format combines all the benefits both the JPEG and GIF formats have, it has millions of colors and allows to compress the file with no loss in quality. You can use PNG for web graphics that require transparency, color heavy, and complex graphics or photographs.<\/p>\n\n\n\n
Modern image formats<\/h2>\n\n\n\n
Today, several modern image formats are used for the web to have smaller, richer, and faster-loading images.<\/p>\n\n\n\n
WebP<\/strong>\u00a0designed by Google provides lossless and lossy compression for images on the web. Its main goal is to become the primary format for photographs on the web replacing JPEG. (WebP – Wikipedia)<\/p>\n\n\n\n
Another format designed to replace JPEG format is BPG<\/strong> (Better Portable Graphics), which also boasts high compression ratio (files are smaller than JPEG with the same quality).<\/p>\n\n\n\n
HEIC<\/strong> is a new image format that Apple uses instead of JPEG in iOS 11. This format utilizes modern compression methods, which make it possible to have higher image quality in smaller files.<\/p>\n","protected":false},"excerpt":{"rendered":"
To embed an image to a web page use the\u00a0<img>\u00a0tag. The <img> tag supports a number of required and optional attributes, which give additional information about it. Syntax The <img> tag is empty, which means that the closing tag isn\u2019t required. It contains only attributes. But in\u00a0XHTML, the (<img>) tag must be closed (<img\/>). Required […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[480],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/20082"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=20082"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/20082\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=20082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=20082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=20082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/mdr.foobrdigital.com\/wp-content\/uploads\/2022\/10\/image-26.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/mdr.foobrdigital.com\/wp-content\/uploads\/2022\/10\/image-28.png\")
<\/figure>\n\n\n\n