What is the hypertext markup language (HTML) <img> tag?

This is a recommends products dialog
Top Suggestions
Starting at
View All >
Language
French
English
ไทย
German
繁體中文
Country
Hi
All
Sign In / Create Account
language Selector,${0} is Selected
Register & Shop at Lenovo Pro
Register at Education Store
Pro Tier Benefits
• Save up to an extra 20% on Think everyday pricing.
• Spend $15K, advance for FREE to Plus Tier with increased benefits.
Plus Tier Benefits
• Save up to an extra 25% on Think everyday pricing.
• Spend $50K, advance for FREE to Elite Tier with increased benefits.
Elite Tier Benefits
• Save up to an extra 30% on Think everyday pricing.
Reseller Benefits
• Access to Lenovo's full product portfolio
• Configure and Purchase at prices better than Lenovo.com
View All Details >
more to reach
PRO Plus
PRO Elite
Congratulations, you have reached Elite Status!
Pro for Business
Delete icon Remove icon Add icon Reload icon
TEMPORARILY UNAVAILABLE
DISCONTINUED
Temporary Unavailable
Cooming Soon!
. Additional units will be charged at the non-eCoupon price. Purchase additional now
We're sorry, the maximum quantity you are able to buy at this amazing eCoupon price is
Sign in or Create an Account to Save Your Cart!
Sign in or Create an Account to Join Rewards
View Cart
Your cart is empty! Don’t miss out on the latest products and savings — find your next favorite laptop, PC, or accessory today.
Remove
item(s) in cart
Some items in your cart are no longer available. Please visit cart for more details.
has been deleted
Please review your cart as items have changed.
of
Contains Add-ons
Subtotal
Proceed to Checkout
Yes
No
Popular Searches
What are you looking for today ?
Quick Links
Recent Searches
Hamburger Menu
skip to main content
{"backgroundColor":"#e6f4fa","sideMsg":"","data":[{"bannerInfo":{"t_id":"Page3509b87e-8d83-4ee9-a921-6ad29f966061","language":{"en_nz":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3ENeed%20Help%3F%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20href%3D%22tel%3A0800%20446%20833%20Option%20%232%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ECall%20us%20on%200800%20446%20833%20Option%20%232%3C%2Fa%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3Bor%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20href%3D%22https%3A%2F%2Finside.chat%2FLenovoNZ%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3Echat%20with%20us%3C%2Fa%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3Bfor%20order%20related%20help%20and%20access%20to%20special%20deals!%3C%2Fspan%3E%3C%2Fp%3E","en":""},"id":"Page3509b87e-8d83-4ee9-a921-6ad29f966061"}},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pageb4cee1e4-536e-42e7-9c3f-81d514da0927","language":{"en_nz":"%3Cp%3E%3Cimg%20src%3D%22https%3A%2F%2Fp3-ofp.static.pub%2Ffes%2Fcms%2F2022%2F09%2F20%2Fsgy8gw8u4tymopd8g2224x0drocvbb133978.png%22%20alt%3D%22zip-logo%22%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3BWanting%20to%20use%20ZIP%3F%20Chat%20with%20us%20or%20call%20us%20on%200800%20446%20833%20option%232%3C%2Fspan%3E%3C%2Fp%3E","en":""},"id":"Pageb4cee1e4-536e-42e7-9c3f-81d514da0927"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pageb354b4f9-4d6e-4fae-92d1-a9fe88aa495d","language":{"en_nz":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3ELenovo%20Education%20Store%20%7C%20Get%20access%20to%20members-only%20pricing%20across%20a%20large%20range%20of%20PCs%20%26amp%3B%20accessories.%20Sign%20up%20now%20with%20your%20Education%20ID.%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.lenovo.com%2Fnz%2Fedu%2Fnzeducation%2Fen%2Flogin%2Fanzedu%2F%3FipromoID%3Dnz_sitewide_carousel_b2_nzedu%22%20target%3D%22_blank%22%20title%3D%22SIGN%20UP%20OR%20LOG%20IN%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ESIGN%20UP%20OR%20LOG%20IN%3C%2Fa%3E%3C%2Fp%3E","en":""},"id":"Pageb354b4f9-4d6e-4fae-92d1-a9fe88aa495d"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pagebf7487aa-a302-4e47-a0c2-714953ce86c3","language":{"en_nz":"%3Cp%20style%3D%22text-wrap%3A%20wrap%3B%22%3ELenovo%20Pro%20Business%20Store%20%7C%20EXTRA%205%25%20off%20everything%20with%20your%20FREE%20Lenovo%20Pro%20membership.%3C%2Fp%3E%3Cp%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Faccount.lenovo.com%2Fnz%2Flenovopro%2Fen%2Fsmbaccount%2Fgatekeeper%2Fshowpage%3FipromoID%3Dnz_sitewide_carousel_b3_nzsmb%22%20target%3D%22_blank%22%20title%3D%22SIGN%20UP%20OR%20LOG%20IN%22%3E%3Cspan%20style%3D%22color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ESIGN%20UP%20OR%20LOG%20IN%3C%2Fspan%3E%3C%2Fa%3E%3C%2Fp%3E%3Cp%3E%3Cbr%2F%3E%3C%2Fp%3E","en":""},"id":"Pagebf7487aa-a302-4e47-a0c2-714953ce86c3"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pageb749c24f-1278-4d12-b866-1703c9ecb4b5","language":{"en_nz":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3EYoga%20Slim%207%20AI%20PC%20%7C%20Level%20up%20your%20creativity%20with%20next-gen%20AI%20experiences%20on%20the%20new%20Lenovo%20Yoga%20Slim%207x.%26nbsp%3B%26nbsp%3B%3C%2Fspan%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3E%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22%2Fp%2Flaptops%2Fyoga%2Fai-pc-series%2Fyoga-slim-7x-gen-9-(14-inch-qualcomm)%2Flen101y0049%3FipromoID%3Dhellobar_nz_04_AI_PC%22%20target%3D%22_self%22%20textvalue%3D%22Pre-order%20Now%22%20style%3D%22color%3A%20rgb(79%2C%20129%2C%20189)%3B%20text-decoration%3A%20underline%3B%22%3E%3Cspan%20style%3D%22color%3A%20rgb(79%2C%20129%2C%20189)%3B%22%3E%3Cstrong%3EPre-order%20Now%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fspan%3E%3C%2Fa%3E%3C%2Fp%3E","en":""},"id":"Pageb749c24f-1278-4d12-b866-1703c9ecb4b5"},"gInfo":""}],"autoRun":true,"displayTerminal":"pc,tablet,mobile"}
Learn More      

What is the hypertext markup language (HTML) <img> tag?

The HTML <img> tag is used to embed images in a web page. It stands for "image" and allows you to display pictures on your website. You can use it to enhance the visual appeal and convey information through graphics.

How do I use the <img> tag to display an image on my webpage?

To display an image, you need to use the <img> tag and include the "src" attribute, which specifies the path to the image file. For example, <img src="" alt="Description">. The "alt" attribute provides alternative text for accessibility and SEO purposes.

Can I use the <img> tag without the "alt" attribute?

While it's technically possible to use the <img> tag without the "alt" attribute, it's strongly recommended to include it. The "alt" attribute provides a text description of the image, which is essential for users with disabilities and improves your website's search engine optimization (SEO).

What happens if the image specified in the "src" attribute is not found?

If the image specified in the "src" attribute is not found, the browser will display a broken image icon. To handle this gracefully, always ensure that the image file path is correct. Including meaningful alternative text in the "alt" attribute also helps users understand the content even if the image is not loaded.

Can I resize an image using the <img> tag?

Yes, you can resize an image using the "width" and "height" attributes within the <img> tag. For example, <img src="image.jpg" alt="Description" width="300" height="200">. However, it's recommended to maintain the image's aspect ratio to avoid distortion.

What is the purpose of the "title" attribute in the <img> tag?

The "title" attribute in the <img> tag provides additional information about the image when users hover over it. It's a tooltip that can offer more context or details, enhancing the user experience..

How can I make my webpage load faster with images?

To optimize webpage loading speed, consider compressing images before uploading them. Additionally, use the "width" and "height" attributes to specify the image dimensions, reducing the need for the browser to adjust layout while loading.

Can I use remote uniform resource locators (URLs) in the "src" attribute of the <img> tag?

Yes, you can use remote URLs in the "src" attribute to fetch images from external sources. However, be mindful of potential security risks and ensure that you have the right to use and display the images.

What is the difference between the "src" and "srcset" attributes?

The "src" attribute in the <img> tag specifies the main image file, while the "srcset" attribute allows you to provide multiple sources for different screen resolutions or sizes. This helps browsers select the most suitable image based on the user's device.

How can I create a responsive image using the <img> tag?

To make an image responsive, use the "max-width: 100%;" CSS style along with the "width" attribute in the <img> tag. This ensures that the image scales proportionally within its container, adapting to various screen sizes.

What role does the "loading" attribute play in the <img> tag?

The "loading" attribute in the <img> tag specifies how the browser should handle image loading. Setting it to "lazy" defers loading until the image is about to be displayed, improving page loading performance, especially for long webpages with multiple images.

How can I align an image horizontally within a paragraph of text?

You can align an image horizontally within a paragraph by using the "align" attribute. For example, <img src="image.jpg" alt="Description" align="left">. This places the image on the left side of the text. Alternatively, you can use cascading style sheets (CSS) for more precise control over image alignment.

What are some best practices for using images on a website?

Optimize images for web by compressing them, use descriptive "alt" text for accessibility and search engine optimization (SEO), specify image dimensions with "width" and "height" attributes, and consider lazy loading for improved page performance. Also, ensure that you have the right to use and share any images on your website.

What is the purpose of the "border" attribute in the <img> tag?

The "border" attribute in the <img> tag specifies the width of the border around the image. For example, <img src="image.jpg" alt="Description" border="2">. However, using cascading style sheets (CSS) for styling is recommended over the "border" attribute for better control and modern design practices.

How can I make text wrap around an image?

To make text wrap around an image, use the "float" property in cascading style sheets (CSS). For example, <img src="image.jpg" alt="Description" style="float: left;">. This causes the text to flow around the left side of the image. Adjust the "float" property as needed for right-aligned wrapping.

Can I use the <img> tag in HTML5?

Absolutely, the <img> tag is a fundamental element in HTML5, just as it was in earlier HTML versions. HTML5 extends support for various attributes and introduces new features, enhancing the overall capabilities of the <img> tag.

What should I do if an image takes too long to load on my webpage?

If an image takes too long to load, consider optimizing its file size, using image compression tools, and employing lazy loading. Lazy loading delays the loading of non-essential images until they are about to be displayed, improving overall page speed and user experience.

Can I use cascading style sheet (CSS) to apply styles to images created with the <img> tag?

Absolutely, CSS allows you to apply various styles to images created with the <img> tag. You can control dimensions, borders, margins, and more. For instance, use the "border-radius" property to round the corners of an image or set a background color for images within a specific class.

What is the impact of image file formats on webpage performance?

The choice of image file format can significantly impact webpage performance. JPEG is suitable for photographs, PNG for images with transparency, and GIF for simple graphics. Consider newer formats like WebP for better compression and quality. Optimizing file formats contributes to faster page loading times.

How do I handle different screen sizes and resolutions with the <img> tag?

Use the "srcset" attribute in the <img> tag to provide multiple image sources for different screen sizes and resolutions. This ensures that the browser can choose the most appropriate image based on the user's device, improving the overall responsiveness of your webpage.

{"pageComponentDataId":"8be139aba72e3-4860-99ca-6ba970e0d706","pageComponentId":"e857fdeft7e51-4b61-84dc-bccec6e68e00","pageComponentDataLangCode":"en_au","configData":{"jumpType":"currentTab","headlineColor":"black","displayNumber":"","styleMode":"vertical","miniCardHoMode":"2","headline":"","products":[{"number":{"t_id":"21kccto1wwnz5","language":{"en_nz":"21kccto1wwnz5","en_au":"21kccto1wwau5","en":""},"id":"Page4260753e-143c-43ae-bd9b-84ae5d0f0dec"}},{"number":{"t_id":"21mccto1wwnz3","language":{"en_nz":"21mccto1wwnz3","en_au":"21mccto1wwau3","en":""},"id":"Page6638705e-acca-4f80-8b27-2e84f2716f0f"}},{"number":{"t_id":"21lkcto1wwnz3","language":{"en_nz":"21lkcto1wwnz3","en_au":"21lkcto1wwau3","en":""},"id":"Page760db0cd-85b7-4d63-b8d8-e3bb500322b5"}},{"number":{"t_id":"21g2cto1wwnz3","language":{"en_nz":"21g2cto1wwnz3","en_au":"21g2cto1wwau3","en":""},"id":"Pagee12208cf-23fd-418f-9456-aae9d4ad753c"}}]},"urlPrefix":"AAAAAAAHAAAB","title":"glossary-right-blue-boxes-fragment","pageId":"e462edae-186e-4421-8743-19efc53941fa","tplId":"65b55929-de05-417a-a92a-ccb888d329b0","urlEdit":0,"uri":"/FragmentDirectory/glossary/glossary-right-blue-boxes-fragment.frag","pageComponentUuid":"e857fdeft7e51-4b61-84dc-bccec6e68e00","targetUser":"0"}
coming coming
Starting at
List Price
Web Price
Web Price:
List Price
Web Price
List Price is Lenovo’s estimate of product value based on the industry data, including the prices at which first and third-party retailers and etailers have offered or valued the same or comparable products. Third-party reseller data may not be based on actual sales.
Web Price is Lenovo’s estimate of product value based on industry data, including the prices at which Lenovo and/or third-party retailers and e-tailers have offered or valued the same or comparable products. Third-party data may not be based on actual sales.
Learn More
See More
See Less
View {0} Model
View {0} Models
Part Number:
Features
See More
See Less
Compare
Added!
Great choice!
You may compare up to 4 products per product category (laptops, desktops, etc). Please de-select one to add another.
View Your Comparisons
Add To Cart
Add To Cart
We're sorry,
Products are temporarily unavailable.
Continue shopping
Learn More
Coming Soon
Featured Product
Best Deals of the Day
Oops! No results found. Visit the categories above to find your product.
Save
open in new tab
© 2024 Lenovo. All rights reserved.
© {year} Lenovo. All rights reserved.
Compare  ()
x