Graphics

Graphics and images are a critical part of any website which can enhance the appearance and user experience on your website as they provide visual representations to entertain, educate, or emotionally impact your site visitors. Graphics are important to viewers and how we incorporate them into our digital platforms. When adding graphics and images to your site, it is important to know which format to use and when to use them. The most common format options for presenting images on the web are Scalable Vector Graphics (SVG), Graphics Interchange Format (GIF), Portable Network Graphic (PNG), and Joint Photographic Experts Group (JPEG).

In this section, we will learn more about the different image formats, the importance of image optimization through compression, configuring images with CSS, and accessibility. Each of the following chapters is representative of J. David Eisenberg’s course HTML: Images and Figures, that is available on LinkedIn Learning. It discusses obtaining stock images legally, figures and figcaption elements, responsiveness, and special effects.

For learning the basics about using images on your website, Chapter 5.1: “HTML Images Made Simple” covers how you can add and manipulate images using HTML coding. Chapter 5.2: “A Basic Look at an HTML Image Element”, Chapter 5.3: “How to add images to your webpage with HTML”, and Chapter 5.4: “Adding Images in HTML” give detailed explanations on adding images to your website using the HTML5 <img> tag. Along with the <img> tag, there are several attributes, which are used to define the characteristics of an HTML element such as src, height, width, and alt.

Placement of your web images can enhance your visitors’ experience and increase usability. It is ideal that every web page has an image at the top such as a banner or hero image. Chapter 5.5: “The Hero Image” explains how having one huge image at the top of your webpage can set the tone for the entire site. Also, Chapter 5.6: “Imaging Imaging Imaging: HTML Imaging” explains how to align images to best fit your website and how to make them look a certain way to better convey the information on your website. 

It’s important to use the correct image file type on your site. Using the wrong format could mean a bad print or a poor web image, a giant download, or a missing graphic. Chapter 5.7: “Common Web Image Formats and When to Use Them” provides insight that will help you select the most appropriate formats to use for your site’s images.

Image descriptions, also known as “alternative text (ALT)”, can assist website visitors who are blind or have low vision access to the information contained in your website images. Chapter 5.8: “Inserting Images in HTML: It Matters for Artists too!” covers the characteristics of what well-written ALT image descriptions should include. Also, for examples to help you get a better understanding of alt text and the importance of accessible images, Chapter 5.9: “The Basics of Alt Text” covers those topics.

Now that you have learned about adding HTML images, correct file formats, and placement, it’s time to get creative. Chapter 5.10: “Creating Images with CSS” will help you understand the relationship between CSS and its target div tags and how the possibilities for image manipulation with CSS are endless. Also, Chapter 5.11: “Use CSS to Enhance Your Images with Special Effects” illustrates how to implement the CSS to create special effects that can change an image into a geometric shape, rotate an image, and more.

Sites that use too many images, or have images that are too large, have longer loading times. This can slow down your entire page, irritating visitors and actually hurting your site’s ranking in online search results. A prolonged image loading time hurts reader engagement and creates negative user experiences. Chapters 5.12: “Why Some Images Load Slower Than Others”, Chapter 5.13: “Image Optimization: Compressing Files to Save Space”, and Chapter 5.14: “Web Design Image Optimization” give an in-depth explanation of how to compress, resize, and optimize your site images to achieve faster page speeds, not to mention improved SEO and happier visitors.

One of the most popular forms of image compression that can reduce an image without any loss of quality is “lossless” compression, which simply describes an image that is compressed without the loss of the image’s data. Also, there is “lossy” compression which reduces the number of colors in your image and results in irreversible loss of information. In Chapter 5.15: “The Difference Between Lossy and Lossless”, the author offers recommendations on which of these compression formats is best for you and your purpose.

For serious bloggers, Chapter 5.16: “Eight must-have graphics for blogging” lists the eight graphics that all blogs should have for both for promotional purposes and to break up large bits of text with visuals.

Graphics and images on your website can be very powerful, but they can be overused and misused quite easily. Stunning photographs and stylish graphics will help set your website apart from your competition and make it much more memorable to your audience. It is important to prepare your web graphics by selecting the right file format, image size, resolution, and alt description.