How to Add Images to Your Web Page on the Raspberry Pi
Adding pictures is a great way to liven up a web page with the Raspberry Pi and help you to get your message across. For example, look at the two pictures on this page: a wide panoramic shot as a banner across the top to give the site a visual identity, and a photo taken on a trip.
To add an image to your web page, insert a tag in your HTML document that tells the browser where to find the image and what its filename is. You also need to tell it how big it is and provide a short description of it. Here’s the image tag for the banner picture:
<img src=images/banner.jpg width=800 height=127 alt=panoramic photo overlooking a valley in Spain />
This tag looks a bit more complicated than the others you’ve used so far because it contains additional information, but it’s not that complex when you break it down.
The extra information is formatted with a short word that explains what kind of information it is, an equal sign, and then the information itself between double quotes. Additional pieces of information like this in a HTML tag are known as attributes. The attributes in the image tag are
src: This is short for source and tells the browser which image to use, and where it can find it. If the image is in the same folder as the HTML file, you can put the filename only here, and if it is in a folder above the current folder, you could use the source ../banner.jpg.
You can also put a link to an image on the web if you include its full website address, starting with http://; for example, http://www.example.com/testimage.jpg. You should avoid using images from others’ websites without permission, however, because it steals their bandwidth (they might have to pay extra to serve the image to your visitors) and it’s an infringement of copyright.
width: This tells the browser how wide the image should be shown on screen, measured in pixels. A pixel is the smallest dot the screen can display, and you’ll develop an instinct for the right size to use images as you build sites. A common screen resolution is 1024×768, which means there are 1024 pixels horizontally and 768 pixels vertically.
If the image file is wider or thinner than the size specified in the <img> tag, the browser resizes the image. You should avoid using image files that are larger than their display size, however, because the browser still has to download the whole image and that can slow down your website. Take particular care with photos from your digital camera, which can be huge.
height: This tells the browser how tall the image should be on screen, measured in pixels. Again, it is resized by the browser if necessary.
alt: This is short for alternative text and it provides a short description of the image that is used if the image can’t be shown or seen for any reason. It helps visually impaired web users to understand visual content, helps search engines to understand what images contain, and also helps people with slower computers, like the Raspberry Pi.
Someone using the Dillo browser, for example, might switch off images to speed up their browsing. They just see the alternative text you’ve provided for each one instead. Writing good alt text is an art form in itself, but the key thing is not to try to describe the image, but to try to convey its meaning instead.
For example, it’s okay to say "Google logo" without having to describe what it looks like. The alternative text is only shown when images aren’t available, so it shouldn’t contain any additional information not in the image. Keep your alt text short: Remember that in some cases it’s going to be read aloud by a screen reader, and images are rarely the most important content on the page.
Images can be slow to download, so use them sparingly. It’s better to use a few well-chosen pictures that help you tell your story, than to splash decorative eye candy everywhere. Pictures that load almost instantly from your SD card on your Raspberry Pi might take a long time to download over the Internet when your website goes live. Only .jpg and .gif format images work reliably across all browsers.
If you need to use the same image on different web pages, reuse the src part of your image tag. If you reuse exactly the same copy of an image, the visitor’s browser downloads the image the first time, and then reuses it without downloading it again the second time.
That can make your website much faster, especially if you have logos or other design features that appear on every page. It also saves space on the server if you’re only storing one copy of each image.