How to add image picture in webpage

Adding image in html page is one of the most regular tasks in web page designing, as a web designer, you always want to beautify your web page with different type of image.

Here we learn, how to add image in html page, set image width height using css style like example below.

<img src="" alt="" title="" width=""  />

Images are everywhere on the web, Image make any web page more attractive, images are the most commonly shared content on social media and every modern web page contains good number of image to draw visitors attention, any web page reader love to view beautiful images while browsing any webpage.

There is a saying that "one image talk thousand words".

But still many websites are not using images to their full potential

Image tag in HTML
Image tag <img src="" alt="use of image tag in html" title="html image tag" /> is used when we want to display some image on our webpage

<img src="image-folder/image_name.jpg" alt="image name for search engine" title="image title for end user and search engine" /> 

You also can write many other additional property for display using Css Class.

Image tag Properties in HTML

• src

  Required attribute, this is the path to the image, this is virtual path, so you can display image from any sources.

  Remember, Image src (source) property always takes virtual path, not physical path.

• width

  Optional attribute. This specifies the width to display the image

• height

  Optional attribute. This specifies the height to display the image, Most of the time we don’t specify the height of image, unless we need to fit the image within a specific container

• alt

  This is also optional, alternate text used in case the browser/user agent can't render the image, but this property is very helpful for search engine optimization

• title

  Title is an optional property, but very useful for SEO

<img src="imageName.jpg" style="width:400px;height:200px;" /> 

Very big size image can slow down the page load, and visitor may not wait for long, so while using any image on webpage make sure they optimized and use right percentage of width to make them responsive for different device

Note:
Though you can use any images from external site, technically possible, but that may be bad idea of finding images for your website. There are many images are protected by copyright laws, that means using them without permission can land you in very legal and financial problem, so be careful using any free images from web