{"id":391,"date":"2021-07-06T18:44:17","date_gmt":"2021-07-06T13:14:17","guid":{"rendered":"https:\/\/wpproonline.com\/?p=391"},"modified":"2026-02-26T10:44:19","modified_gmt":"2026-02-26T10:44:19","slug":"chapter-15-images","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/chapter-15-images\/","title":{"rendered":"Chapter 15: Images"},"content":{"rendered":"\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameters<\/strong><\/td>\nDetails<\/strong><\/td>\n<\/tr>\n
src<\/em><\/td>\nSpecifies the URL of the image<\/td>\n<\/tr>\n
srcset<\/em><\/td>\nImages to use in different situations (e.g., high-resolution displays, small monitors, etc)<\/td>\n<\/tr>\n
sizes<\/em><\/td>\nImage sizes between breakpoints<\/td>\n<\/tr>\n
crossorigin<\/em><\/td>\nHow the element handles crossorigin requests<\/td>\n<\/tr>\n
usemap<\/em><\/td>\nName of image map to use<\/td>\n<\/tr>\n
ismap<\/em><\/td>\nWhether the image is a server-side image map<\/td>\n<\/tr>\n
alt<\/em><\/td>\nAlternative text that should be displayed if for some reason the image could not be displayed<\/td>\n<\/tr>\n
width<\/em><\/td>\nSpecifies the width of the image (optional)<\/td>\n<\/tr>\n
height<\/em><\/td>\nSpecifies the height of the image (optional)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n

<\/p>\n\n

Creating an image<\/h2>\n\n

To add an image to a page, use the image tag.<\/p>\n\n

Image tags (img) do not have closing tags. The two main attributes you give to the img tag are src,<\/em> the image source
and alt<\/em>, which is alternative text describing the image.<\/p>\n\n

<img src=\"images\/hello.png\" alt=\"Hello World\"><\/pre>\n\n
You can also get images from a web URL:<\/p>\n\n
<img src=\"https:\/\/i.stack.imgur.com\/ALgZi.jpg?s=48&g=1\" alt=\"StackOverflow user Caleb Kleveter\"><\/pre>\n\n
Note:<\/strong> Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img><\/strong> tag
creates a holding space for the referenced image.<\/p>\n\n
It is also possible to embed images directly inside the page using base64:<\/p>\n\n
<img src=\"data:image\/png;base64,iVBOR...\" alt=\"Hello World\"><\/pre>\n\n
Tip: To link an image to another document, simply nest the <img><\/strong> tag inside <a><\/strong> tags.<\/a><\/p>\n\n
Choosing alt text<\/h2>\n\n
Alt-text is used by screen readers for visually impaired users and by search engines. It’s therefore important to
write good alt-text for your images.<\/p>\n\n
The text should look correct even if you replace the image with its alt attribute. For example:<\/p>\n\n
<!-- Incorrect -->\n<img src=\"anonymous.png\" alt=\"Anonymous user avatar\"\/> An anonymous user wrote:\n<blockquote>Lorem ipsum dolor sed.<\/blockquote>\n<a href=\"https:\/\/google.com\/\"><img src=\"edit.png\" alt=\"Edit icon\"\/><\/a> \/\n<a href=\"https:\/\/google.com\/\"><img src=\"delete.png\" alt=\"Delete icon\"\/><\/a>\n<\/pre>\n\n
Without the images, this would look like:<\/p>\n\n
\n
Anonymous user avatar An anonymous user wrote:<\/p>\n
Lorem ipsum dolor sed.<\/p>\n
Edit icon<\/a> \/ Delete icon<\/a><\/p>\n<\/blockquote>\n\n
To correct this:<\/p>\n\n