The <img> Tag
In the section URLs: Links and Images, we briefly saw how to use the <img> tag to embed images in web pages, but this topic deserves a little more attention. We started with elements like this:
<p><img src="http://example.com/vacation.jpg" alt="My vacation" /></p>
Then when talking about relative URLs, we saw the (probably more useful) form with those URLs:
<p><img src="pics/vacation.jpg" alt="My vacation" /></p>
If we look at the HTML reference for <img>, we see that only the src attribute is really required (at least as of HTML5).
The alt attribute isn't entirely required, but it should be included if the image actually conveys any content. That is, if the image actually has some meaning, then alt should be a text-equivalent of that meaning.
Other attributes that you can (and generally should) include are width and height. These are used to give the browser a hint about how big the image is: how much space it will take up on the page. Both values are given in pixels.
This way, the browser can display the HTML before it loads the image and discovers how large it is. That will make the page appear to load faster to the user: they will quickly see the page with an empty rectangle where the image goes, and the image will be drawn as it loads.
<img src="pics/vacation.jpg" alt="Us on vacation" width="320" height="240" />
You should not use width and height to change the size of an image. If you make width and height different than the actual image size, then the browser will have to scale it and might not do it well. If you want the image to be a different size, then it should be scaled in an image editor.
Image Files
When adding images to your page, you have to remember that the image files become part of your web site, as well as the HTML and CSS files. That means that they must be uploaded to the web server the same way as everything else.
For example, if you have an image tag like our example:
<p><img src="pics/vacation.jpg" alt="My vacation" /></p>
… then you must have a folder pics with a file vacation.jpg inside. When you upload files to the web server, you should have the same structure.
Again, URLs are case sensitive, so these are all different URLs: vacation.jpg, Vacation.jpg, vacation.JPG. Make sure your URL matches the name of the file you're uploading: if not, the image won't load in the browser.
File Sizes
When adding images to your web pages, it can be very easy to create pages that take an annoying amount of time to load.
For example, suppose you want make an image gallery and include five images taken with your phone. If you use the images directly from your phone, then you are probably creating a page that is more than 10 megabytes. That page will probably load just fine when you're testing on your computer since it doesn't take a human-measurable amount of time to load that much data from your computer's disks.
But after uploading the page and images to the web server, you might find that it takes 2–4 seconds to load the page on your home computer, which is pretty long to wait for a page. Then on your phone, you'd likely find that the page takes more like eight seconds to load (when you have a decent signal, and longer if you don't).
The problem is simply that the total amount of data that must be downloaded is too large. Having five full-camera-sized images on one page just isn't a good idea.
The most likely solution is the scale-down the images: you likely aren't displaying that many eight-megapixel images on one page. You probably want them to be scaled down, at least by half in each dimension leaving you with a quarter the total image size. A page with 2.5 MB worth of image would still be large, but it's at least sane.
When creating pages, keep the total size (HTML + CSS + images + JavaScript + …) in mind. If the total is more than about one megabyte, you should start asking yourself if it's a good idea and looking for ways to shrink things. In general, it's a good idea to have pages as small as possible so they load quickly.