Adding Images to Your Websites

Adding Images to a Site

Images are extremely important to websites. People tend to be visual, so we like to see images and they often help us understand content and can also be used to evoke emotion by the user. Logos are important on websites, they help to orient your viewer, it helps them know where they are and how to get back to the home page, as you should make the logo a link back to the home page.

People prefer images over text, as most people don’t like to read too much. When choosing images for your site, you need to be very careful that you choose images that help your user understand your site and aren’t just there for decoration. Images take up a lot of memory on a computer, so if you have too many, it can slow the speed at which your site loads. Since we frequently view web pages on mobile devices, you don’t want an overabundance of images taking up space and making your user scroll to get to what they need.

Professional sites will often have graphic designers and photographers that create the images for the site. When you are building a site for a smaller business or a personal site, you often don’t have the money for graphic designers and photographers. Then you can use images others have created. There are many sites where you can get free images, but there are also many sites where you can buy the use of images for a small fee. Do not use images without giving credit to the owner, even if they are “free.” You should still cite where you got the image and who developed the image. To make sure you are not violating copyright; you should try to find images through “Creative Commons.” Creative Commons images are free to be used (but still need to be cited). You can use free sites, such as Unsplash, Pexels, PikWizard, Pixabay, and Icons8. You can also use paid sites such as Deposit Photos, Canva Pro, Adobe Stock, Shutterstock, iStock, and Icons8. There are tons of sites out there to get photos, just remember that you must obey copyright laws, cite where you get those images, and give credit to the creators. You can include captions for your citations, or you can include citations in the footer.

Alternative Text

All images need to have alternative text (alt text). Alternative text is built into the HTML for the image and is done for accessibility purposes. People that use a screen reader for vision impairments use alternative text to understand images. The screen reader will read out the alt text to the viewer, so they know what the image is. Therefore, make sure your alt text is very descriptive to help the vision impaired. Alt text is also used by search engines, and they use it to rate sites. A website will fail validation in the site validators if the images don’t have alternative text.

Alternative text is not an option, it is required by law due to the Americans with Disabilities Act (ADA). If your site is missing the alternative text, you can be held responsible and even get fined. Alt text should be concise, and you don’t include the words “image of, picture, or icon as the screen reader will already state that. You don’t need alt text for purely decorative images that are not used for information.

Adding Images using HTML

We’ve learned in earlier lessons how to add images using HTML. As a refresher, the code for entering an image is as follows:

If you have your images in a separate folder, then you need to include that in the source. The code above indicates that the browser can locate the image inside the site/root folder. If you put your images inside an “images” folder, then you would put the name of the folder prior to the name of the image: src="images/mars.jpg." When coding for entering images, it is extremely important that your name of the image is exactly correct. If the name of the image has a capital letter, you include it. If the name of the image has a space or is misspelled, it must be included in the code just like it is in the folder. Also, make sure you are using the correct image format. HTML doesn’t recognize all formats, so you must make sure you are using a format that is recognized and that you are using the correct format. Currently, the recognized image formats are as in the table below.

Image Formats for HTML

Image Formats for HTML
Image Format	Description
APNG (Animated Portable Network Graphic)	Good choice for lossless animation sequences (GIF is less performant).
AVIF (AV1 Image File Format)	Good choice for both images and animated images due to high performance.
GIF (Graphics Interchange Format)	Good choice for simple images and animations.
JPEG/JPG (Joint Photographic Expert Group Image)	Good choice for lossy compression of still images (currently the most popular), this is the best choice for photographs.
PNG (Portable Network Graphics)	Good choice for lossless compression of still images (slightly better quality than JPEG).
SVG (Scalable Vector Graphics)	Vector image format. Use for images that must be drawn accurately at different sizes.
WebP (Web Picture Format)	Excellent choice for both images and animated images.

Formats like WebP and AVIF are recommended as they perform much better than PNG, JPEG, and GIF for both still and animated images. WebP is widely supported while AVIF lacks support in Safari. For photographs, it is best to use JPG or JPEG because those files are usually smaller and load faster than other formats for photographs. If you have a format that isn’t listed, then it may not be supported by the browsers, meaning the image won’t display on the page. If you are having problems with your image showing up, make sure you don’t have any errors in your code. Then make sure the image is in the correct folder so the browser can find it. If your image is located somewhere else on your computer, then the browser can’t find it. Make sure the image isn’t in the “Photos” or “Pictures” folder on your computer.

SVG remains the recommended format for images that must be drawn accurately at different sizes.

You can also use online images. For example, you can enter an image from Wikimedia Commons like this:

Online images example.

Adding Images Using a GUI Editor

Adding images using a GUI editor is as simple as pasting them or uploading them into the program in the right place. You still need to provide alternative text for the images. Often the GUI editor will have some stock images and icons you can use. GUI editors often have simple photo editors included, so you can make slight adjustments to your images.

Try the Image Formats Self-Assessment below to check your knowledge.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION