Build a Website: Working with Graphics

Originally a side issue for many web designers, graphics — including large-format photographs — have become a central concern of web design. Let’s look at some of the things you need to know in order to use graphics and images successfully on your own website.

Embedding images on a page

HTML has built-in image display capability, and has since the very earliest versions of the language. The format for including an image is:

<img src="http://example.com/path/to/image">

The only required attribute of the <img> tag is src, which is the source. This should be the URL (relative, or fully qualified) of the image to be displayed.

Styling Images

It is important to note that, contrary to logic and common sense, the <img> tag displays inline by default. That means that the image displays as if it were another word within the text, with the bottom of the image aligned with the bottom edge of the line of text, interrupting the flow of the text and messing up the line spacing.

You almost never want this to be the case. Make sure that somewhere in your CSS you include:

img {
     display: block;
}

This will pull the image out of the flow of the text. Using float: left; or float: right;, you can make the text flow around the image.

img {
     display: block;
     margin-top: 10px;
     margin-bottom: 10px;
}

img.flow-right {
     float: right;
     margin-left: 10px;
}

img.flow-left {
     float: left;
     margin-right: 10px;
}

When you flow text around images, it is important to leave some space (margin) around the image, so that the text isn’t butting up against the image. That is very unattractive.

Images as Backgrounds

You can use images as backgrounds to any element.

.element-with-bg-image {
     background-image: url("/path/to/image")
}

This is usually used for patterns and textures — that is, as part of the visual design of the page.

Some people are tempted to use background images as content. That is, they have an image they want people to focus on as part of the content of the page, and they want to include it as the background of an element. Usually this is done to achieve some weird design effect that the person doesn’t know how to do properly.

Be careful with that, though. Image backgrounds have many disadvantages as content:

• they do not print
• they can not easily be right-clicked and saved by the user
• they are not indexed by Search engines, nor are their names and URLs helpful for SEO.
• they cannot be seen by screen readers
• they disappear in any “reading mode”
• they are not included in RSS feeds

Basically — using background images as content doesn’t work because it isn’t intended to work. Background images are part of the background — not part of the content.

Formats

There are a number of image formats in common use, and most of them can be used on the web. The question isn’t usually, “what can I use?” but rather “what should I use in this situation?”

The most important image formats for the web are:

• .jpg, .jpeg — The JPEG file format is primarily intended for photographs. It works well for photos because it compressess the data in a way that looses a little bit of image clarity in favor of a large amount of file-size savings. The loss in quality is not at all noticeable in most cases, but the file-size difference can make a big impact on page load times, especially if you have a large number of images.
• .png — PNG is one of two preferred image formats for non-photographic artwork — line art, logos, and text-images. PNG files can handle transparency, so they work well for images that are a part of a layered page design. They use a lossless compression, which is why they are preferred over JPEG files for logos and other artwork: they stay crisp and clear, instead of becoming blurry.
• .svg — SVG (Scalable Vector Graphics) are different than other types of images. JPEGs and PNGs are both raster graphics (or bitmap graphics), meaning that the image in a particular size, with a particular number of pixels. If you try to make those images too large, they begin to look pixelated and blurry. However, SVG graphics don’t don’t contain a map of all the pixels, but instructions for building the image from lines, curves, fills, and other components. SVG graphics aren’t displayed so much as interpreted. This means that they can scale to any size, without any loss of quality. Because display on the web is so variable — different screen sizes, different screen types — SVG graphics are the best option for logos, line art, and any other non-photographic content.
• .gif — GIF is a file format that was popular before the advent of PNG. It is a very similar format, but it has a smaller range of colors. Today, for most uses, PNG is a better option. But there is one usage where GIFs still reign supreme: animated images. Once used only for ridiculous spinning globes and intensely obnoxious sparkle-star background, animated GIFs have made a huge comeback as a vehicle for meme-based humor on social networking sites.

Other formats that work online, but are not usually the best option, include:

• .bmp — Bitmap, similar to GIF, but without compression. Therefore the image files are much larger than they need to be.
• .tiff, .tif — Similar to PNG, but with a wide range of implementations. TIFFs made in one program may not display correctly in another. PNG is usually a better choice, because they display more consistently.

Formats which will usually not work on the web (or not work as images):

• .psd — PSD is a file format used by Photoshop. It is not an image file, but rather a project file that includes images, history, filters, and other additional data. They do not display in web browsers. If you are using Photoshop, use Export As (or Save for Web in older versions) to create a PNG, GIF, or JPEG image.
• .ai — AI is a file format used by Adobe Illustrator, a vector graphics editor. Like PSD files, AI files are project files that do not display on the web. Use Save As to export an SVG or PNG file.
• .raw — RAW files are image files generated by cameras. They are, literally, the raw, unprocessed image data recorded by the camera’s sensors. The files are huge, and need to be processed by an image management program. RAW files do not display on websites.
• .pdf — PDF, or Portable Document Format, is a file format used for creating complete documents, with style, font, and layout data embedded in the file. PDFs can be used online, but not as images. You can place a PDF at its own URL, and it will display as its own page. You can also embed PDFs into pages with various PDF-reading plugins. But you cannot use PDFs as images in any conventional sense.

Responsive Images

Today, websites need to be responsive. This means that the design — including the size of various elements — needs to respond or adapt to various screen sizes and resolutions.

What this means, practically, is that you need to provide multiple options for an image and allow the browser to choose which image to use.

When it comes to responsive design, there are two different approached for handling the selection of any particular element from a number of options:

• resizing
• art direction

Resizing means simply providing different sizes of the same graphic. Art direction refers to providing different versions — perhaps differently proportioned — of the same element.

Sizing

In order to provide multiple image options at different sizes, use the srcset and sizes attributes.

<img sizes="(max-width: 30em) 50vw,
           (max-width: 50em) 30vw,
           calc(33vw - 100px)"
    srcset="img-200.jpg 200w,
           img-400.jpg 400w,
           img-800.jpg 800w,
           img-1600.jpg 1600w"
    src="img-400.jpg">

Let’s break down what’s going on in that code.

The sizes is defining a list of image sizes based on screen sizes. The list has three items. The first two are pairs of the form (screen size) image size, and the third item doesn’t specify a screen size but only an image size.

The two units of measurement are em, which is about 16px with default fonts, and vw which stands for “view height” and is 1% of the screen (50 vh is half the full width of the screen).

The browser will use the first match it finds, starting at the top.

So: – for screens up to 30 ems wide, the browser should prefer an image that is 50% the width of the screen. – for screens over 30 ems, up to 50 ems, the browser should prefer an image that is 30# of the screen. – for screens over 50 em, up to any size, the image should be a third of the width minus 100px.

Since the last item in the size list doesn’t specify a screen size, it is a “catch all”.

Once the browser has determined the size for the image, it will select an appropriate option from the list of images you provde in srcset. Each item in the srcset list has a file name and an indication of its own width in pixels.

After srcset, you should still use the src attribute to define the “fall back” or default image to use.

Providing multiple options for each image, at different sizes and resolutions, allows the browser to optimize the viewing experience for the user.

Art Direction

If you want to provide one or more different images — not just different sizes of the same image — use the <picture> element, with a <source> for each version of the image.

<picture>
     <source media="(min-width: 50em)" srcset="large.png">
     <source media="(min-width: 30em)" srcset="medium.png">
     <img src="small.jpg">
</picture>

The browser checks each <source>, evaluating the <media> attribute, and then uses the first one that is true. If none of them are true, it uses the <img> tag as the default or fall back image.

So, in this case:

• If the screen is larger than 50 ems, then large.png is used.
• If the screen is larger than 30 ems, but smaller than 50, medium.png is used.
• For any screen smaller than 30 ems, small.jpg. is used.

Conclusion

Images are an important part of the web. They are used as part of many site designs, and they form a large portion of many sites’ content.

Learning how to use images effectively — creating the right markup, choosing the right format, and using responsive image techniques — will make your design work stand out.