Image -- Head first into HTML

How image works behind scene

1. Browsers treat <img> elements a little differently than other HTML elements; after reading the HTML page, the browser retrieves each image from the web server and displays it.

2. If you have more than a couple of large images on a web page, you can make your web page more usable and faster to download by creating thumbnails—small images that the user can click on to see the large version of the image.

3. A width of less than 800 pixels is a good rule of thumb for the size of photo images in a web page. Most photo images that are created by digital cameras are too large for web pages, so you’ll need to resize them.

4. Images that are too large for the browser make web pages difficult to use and slow to download and display.

5. Images can be used as links to other web pages. To create a link from an image, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.

Use relative path 

Use URL

Always provide an alternative

Size up your images（if you don't add these attributes, the browser will decide it for you)

but the browser has to retrieve the entire large image before it scales it down to fit your page you can edit it before you load it

You could use the width and height attributes to resize an image, but that’s not a good idea. Why? Because if you do that,
you’re still downloading the full-size image, and making the browser do the work to resize the image (just like when you have
the auto resize option on in browsers that support that feature). The width and height attributes are really there to help the browser
figure out how much space to reserve for the image; if you use them, they should match the actual width and height of the image