5 – HTML – Images

Images

Images have played a large part in making the internet such a popular medium. Images bring plain text pages to life and the use of logos, photographs, graphics, illustrations and icons are part of every website.

How to add an image

To add an image in HTML we use the img element followed by the src source image URL, which can be a relative or an absolute link.  The img element is an empty element, so it does not require a closing tag.

For more information on absolute and relative links see the last post.

How to change the size of an HTML image

We control the size of an image by adding height and width attributes to the img element. Sizes for height and width attributes are always pixels.

Adding an ALT tag

The alt tag is used to describe an image for screen-readers, it also appears in place of an image if it does not load. alt is also helpful for search engines when cataloguing images and pages.

The alt tag is added as an attribute to an image.

It is important to add descriptive alt tags so that people using screen-readers will be able to understand what the image contains.

For example with the above image, instead of just having a meaningless file name, we should describe what the image looks like. Therefore, it would be better to use “Waves breaking on a cloudy beach” for the alt tag.

Creating thumbnail images

Thumbnail or preview images which link to a larger image in a new window is a technique that is used often within websites and app. To create this effect, we add an <a> anchor link from the smaller image to open a new window that will show the larger image.

Adding a caption to an image 

Adding a caption to an image requires the image to be wrapped in the <figure> element. Inside this is added the image followed by <figcaption> element which includes the caption text.

---

Image formats

Below is a list of the most commonly used formats.

.bmp	Bitmap Image Format
.gif	Graphics Interchange Format
.jpg	Joint Photographic Experts Group
.png	Portable Network Graphic
.svg	Scaleable Vector Graphic

Each of these formats has strengths and weaknesses, so let’s take a closer look at each type to see which are the most suitable formats for different types of images.

BMP

Bitmap images are created using individual colour values for each pixel in the image. BMP is a lossless format which retains all this image data making the files larger than other formats. As a result, BMP has been surpassed by other formats which can compress the image data into smaller files sizes which require less time to load.

GIF

GIF is bitmapped image format which enables an image to be compressed by limiting the number of colours used in the image.

GIF images contain a maximum 256 colours. Images can be further compressed by reducing the number of colours used in an image. Image creation and editing software like Adobe Photoshop allow for granular control when optimising GIF images, to produce the best quality and performance results.

Click on the image above to see a range of settings applied to the same image.

Animated GIFs

GIF images have another benefit and that is they can be animated. GIF images can include a series of images, which can be played in sequence to create an animation. GIF animations are used extensively online especially in social media as eye-catching and easily shareable content.

 JPEG

The JPEG format was developed specifically to compress photo-realistic images which can have millions of colours.

JPEG image compression has 12 settings ranging from low to high quality. The higher the setting, the larger the file size and the longer the image will take to load. The image compression choice is a balance between quality and reduced file size (quicker loading times).

Click on the image above to more compression settings on the same image.

You may find it surprising to know how much file space is saved using the high-quality image setting vs maximum quality image setting with almost no visible difference in the images.

PNG

PNG is a lossless format with file compression along with support for transparency. File compression occurs by rearranging the data in an image into a more efficient data structure which requires less information allowing the file size to become smaller.

So why don’t we just use PNG files all the time? Well, even though PNG files can be compressed they are still lossless and that means they still retain all the information in the image, this can lead to larger file sizes compared to compressed JPEGs which loses information when compressed.

Images compressed with PNG format work best for graphics, images with text and images with transparent backgrounds.

SVG

SVG is a scalable vector format, this means the image can be scaled to any size. Unlink  JPG, PNG, GIF which are bitmapped images, SVG images contain a series of coded instruction which recreates the image using coordinates, lines, shapes and colours.

SVG images are easy to animate as every vector element and attribute can be changed directly in the code. This makes it possible to create animated sequences without creating new images for each animated frame.

So, which the best format?

This all depends on the individual image but as a general guide the following can be applied:

JPEG is generally the best choice for creating smaller files sizes on photographic images with the least noticeable loss of quality.

PNG is generally the best choice for images with text and graphics and also for images with transparent backgrounds.

SVG is generally the best choice for anything that is vector based such as logos, icons and illustrations.

Important: Images should always be optimised to have faster loading times, so as to ensure the users experience is not deteriorated by slow loading images.

---

 

Next step 
HTML – 6 – Forms