Our New Series on All Things Web Development
Images add value to a webpage that completes a user’s experience both visually and aesthetically. Images provide value, information, and decoration. Images also come in different types from a development standpoint. There are two main types of images that users actually see on web pages: inline images and background images. Both present great opportunities for conveying information to an audience and each comes with unique challenges to ensure that the highest quality of web development is met.
Inline images are what users think of when they see an image. They are images shown in their entirety, when compared to background images. Inline images are images that convey value and information to the user. Inline images support a wide variety of file types files from jpg, png, and svg to even gif and ico files.
Inline images are coded at a minimum as:
<img src=”” alt=”” />The src attribute is required as it contains the path to the image displayed. The alt attribute holds a text description of the image for accessibility standards. Screen readers read this description out to their uses so they know what the image means. Alt text is also displayed on the page if the image can’t be loaded for some reason.
When it comes to styling images, there are two challenges: height and width. Images come in all different shapes and sizes. Portrait and landscape images cannot be sized all the same without distortion. The six examples below stress the challenges with the same image at different altered height and widths.
Example One shows an image with a fixed width and no set height. Resize the browser window to see it goes beyond the screen. It fails to be responsive to window width adjustment.
Example Two shows an image with a fixed height and no set width. The same problem arises as with Example One.
Example Three demonstrates an attempt to give the image equal height and width. Here the image is distorted. While the code may force an equal height and width, the original dimensions of the image were not. This creates an unpleasant experience for the user.
Here in Example Four an image has a fixed width as a percentage with height set to auto. This image is responsive to the window browser and presents the best user experience.
The final example, Example Five shows an image with height and width naturally set. This example shows the image as it truly is without styling code added to it. Since this image is larger than certain window widths, it runs off screen at some view ports.
Background images are those images that add decoration and are created purely with CSS (the program language of styling). Background images are always placed into a container element such as div, section, or article. Background images allow for images to be equal height and width when the image itself has not been cropped as such and is a more consistent choice for uniformity.
Inline images come with their natural height, however, the container used for a background image requires some sort of height added to it for it to be even visual on the screen. Additionally, background images support several CSS properties that should always be placed with them. These three main styling properties are background-size, background-position, and background-repeat.
Background-size sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space. Spaces not covered by a background image are filled with the background-color property and the background color will be visible behind background images that have transparency.
This example showcases a background image with a background size of contain. Contain scales the image as large as possible without cropping or stretching the image. Here the image does not fill the entire container leaving empty spacing as seen by the green background color.
A background size of cover scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
Background size used with percentages stretches the image in those corresponding dimensions. Here the background-size is set to 50%, 100%. The image is then stretched to 50% width of the container and 100% height of the container.
Background-position sets the initial position for each background image. Top, bottom, left, right, center, and even percentages can all be used to show a certain part of the image or the location of the image within the container.
In this example, the background position property is set to “left.” Left, top, bottom, or right all specify an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle fo the edge specified.
The most frequently used background position property is “center.” Center demonstrated here, shows most of the image in all directions.
Background repeat when used with background images is as the name suggests used to determine where the image should repeat within the specified container. Most background images have the property set to no-repeat defining it once in the container. Decorative images tend to use repeat to show a small spec multiple times over a responsive container is used.
Here the background repeat property is set to repeat. The image duplicates filling the entire container.
Background images are not without their problems. Browsers do not provide any special information about background images to assistive technology. This is important because screen readers would otherwise not announce their presence and convey nothing to the user. This becomes even more complex when discussing search engine optimization (SEO). Only inline images are indexed by Google, for example. To solve for this challenge, adding the attribute “aria-label” as an equivalent to alt tag with the same information placed in an alt tag overcomes this barrier and provides a more equitable experience for all users.
Wherever possible, text should be text and not embedded into images. For example, using images for headlines or placing contact information—like phone numbers or addresses—directly into images prevents users from copying and pasting the information; it makes the information inaccessible for screen readers, and it isn’t responsive. Instead, place the text in your markup and if necessary use web fonts to achieve the style you need.
Inline images also present a unique performance challenge. Images can be heavy on a web page’s ability to load and parse them. Recently, most browsers started supporting the attribute of loading=”lazy” for lazy loading inline images. This allows images to load in real time as the user reaches them on the screen rather than when the web page is first loaded. Background images do not have the same attribute and thus a number of large images styled as background images might become a performance challenge.
Recently, NJI Media’s Development Team wrote a script for encoding images to ensure that they meet the highest standards of modern web development. This function ensures that all inline images contain the now supported attribute of loading=”lazy” to enhance web performance. It also forces all images to have either an alt tag or aria-label for accessibility standards. Our code guarantees that users are not only be delivered the best web experience, but also that our clients are delivered the best web value.
