Design for web

Chapter 4: Working with visuals

illustration of images.

vector or bitmap

The first decision we make for design work is whether we’ll be working on a vector or a bitmap design. This will lead us to our choice of which app to use for the work in hand. Many graphics apps offer the tools and functions to work on both but most designers will have their preferred vector or bitmap tool (i.e. one that focuses on one or the other) and will stick to that depending on the project. If you have not yet decided on an app to use, try out a few options and find the one to suit you.

vector

Vector graphics, in technical terms, are made up of calculations. The visual consists of paths and shapes, formed by points and connected by straight lines or Bezier curves. This means that the graphic remains scalable without loss of quality as the new size is merely calculated, or re-calculated when resized.

example of vector image with zoomed section.

bitmap

Bitmap images, in technical terms, are made up of pixels. The visual contains a set number of pixels, depending on resolution, to form the image itself. The size and resolution determine the quality ~ scaling down is possible without losing quality. Scaling up, or zooming in, will show pixellation.

example of bitmap image with zoomed section.

To decide which approach to take will depend on the project itself and its final output. What kind of design are we creating: a logo? An icon or icons set? A feature visual with photographic detail? A flat colour illustration?

Most could be created as either vector or bitmap but it’s the final output, the details and the nature of the visual which will determine which is best. Logos and icons, for example, are usually planned for various outputs: this could be printed on stationary, or even stitched onto garments, as well as displayed online in various sizes. Flat colour will therefore likely be the best approach ~ hence a vector graphic will be the best format to use.

If the visual contains photographic elements however, especially if the subtleties of light and gradation are essential to the image, the bitmap format is the only one which will yield the right end result. Considerations then will be all about the correct resolution for the final output. If the image is to be printed at a large size, for example, a high resolution will be paramount ~ bearing in mind that it is possible to scale down without the loss of quality but scaling up will deteriorate the quality.

graphics apps

app icons for graphics software.

There are plenty of options when it comes to which software to use. And it’s important to remember that apps are merely tools ~ we can opt for whichever suits us, our mindset and workflow best. While web work in a studio might mean that a certain toolset is required, we should be open minded and try out the different apps available and be prepared to learn new tools as and when needed.

If you are worried that knowledge of a certain software is essential - then rest assured that those days are long gone. It will be your work and your skills that will get you the job, not knowing how to use any particular software. You might be expected to learn new apps but that is a given in most cases.

file icons of different formats.

In addition to the tool itself, an important consideration is the file format. If we work alone, the final output is what we will plan for. If the working file itself is to be shared with others, then we have to consider which apps are used or use formats that remain editable in various apps.

Quick tip: When working in a team, agree on file formats for file sharing to make collaboration easy :)

For example, a SVG (vector) file is editable in most vector apps. Proprietary formats however are more difficult to manage. Working in Adobe Illustrator, we end up with a .ai file which only Affinity Designer can open but many other vector apps cannot. In turn, Illustrator will only allow us to open PDF files but not the .afdesign file Designer will create.

dimensions & units

When we open our chosen app to create a new file - we’re confronted with a seemingly endless number of options, dimensions and settings. There are various categories and many, many sizes to choose from ~ enough to make our heads spin.

illustration of the many format options.

print

If the final output is to be printed, then the presets are useful as print sizes are set in dimensions and working in the correct format will save time later on. Selecting the required size for print purposes is definitely recommended and a quicker way to work.

  • select the preset as required
  • work in centimetres

web

When working for web however, working with presets can lead to the wrong approach to work. We should not think of designing for devices and their endless variations in size and orientation but rather aim for a fluid, adaptive approach to design.

  • set a size by aspect ratio
  • work in pixels

By deciding on the overall dimensions by aspect ratio we can work at the largest size used for display and then create iterations to fit different outputs. For example, an icon is most likely used for profile images and as shortcut icon on homescreens. It will be square, i.e. have an aspect ratio of 1:1 and at its largest display size will be 512x512px, as shown in the following example.

illustration of an icon design.

A promotional feature visual will be quite different and likely have different dimensions, depending on the final use within the design. Working with the proportions given, the aspect ratio of this example is 16:9 - setting the dimensions to the largest planned display size will then allow us to edit the image at high quality and scale it down for optimisation as final step.

illustration of the a feature image design.

It's important to remember that the quality for bitmap images can remain high when scaled down but not up. When a small bitmap image is enlarged, its quality will deteriorate. Vector graphics in comparison will be scalable to smaller or larger sizes without any loss of quality.

Quick tip: Don’t worry about presets to start off with!
Focus on aspect ratio.
Set your own dimensions to fit your project :)

By concentrating on the aspect ratio and working at the largest planned display size, we can bypass the complication of having to select a given preset for a given device. Our design process will therefore start with a fitting approach and flexibility in thinking

optimising images

Visual content will contribute greatly to an aesthetically pleasing and engaging webpage. Everyone is naturally drawn to visuals and we can use this to guide people through our content. Using images as wayfinders and enhancing the presentation of our content will result in a good user experience and an effective website overall.

However, we need to bear in mind that images can contribute a lot of weight to our pages, slowing down the loading process. The only media heavier than images are video and audio files. As a webpage's weight will be the sum of all content, code and media combined and we should aim for as low a file size for each part. Images should therefore be sized to proportion and optimised for a reduced file weight. All will need thorough preparation and optimisation for online viewing. This will not only be important for a good user experience but will also mean sustainable delivery of web content.

It might be tempting to use a nice photograph we take and simply add it to our website folder for inclusion on our page. Digital photographs can not only be much larger than their online display size but also be incredibly heavy.

This example photo shows the original on the left side in large dimensions, larger than required for online display, weighing around 7MB in file size.

On the right are typical smaller sizes at varying aspect ratios which can then be saved for the web. By saving these smaller versions for the web, we can compress them to become much smaller in file weight, anything between 120kb to about 260kb ~ a huge difference which will ensure faster page loading.

screenshot of photo in different sizes.

Whichever image editor you opt for – most will likely offer some functions to optimise for the web. If you already use an image editing application, check for options like ‘save for web’ / ‘save for devices’. There is a difference how each of the formats, vector or bitmap, are optimised and in certain instances (for example, to provide fallbacks), we might need to save our artwork in more than one format too. For bitmaps, optimising images will always be a juggle: a compromise between file size and quality ~ our aim will be the highest possible quality with the lowest possible weight.

vector graphics

The early days, the web did not support the use of vector graphics at all and only allowed bitmaps. This went on for many years, however, these days, we can make use of the SVG format. SVG stands for Scalable Vector Graphic which means the vector is respected and there will be no loss of quality at any size. Simple shapes will be fairly light in file size while more complex graphics with complex details are likely a lot heavier.

We can still use the 'save for web' option in our graphics editor, however, it is likely that further optimisation is needed. Any vector graphic should be optimised in the editor before saving to SVG and finally, the file's code then needs to be optimised, i.e. stripped of unnecessary code and spaces within the file.
For more details, see vector graphics.

bitmap images

As bitmap images are comprised of pixels, their actual dimension and size will affect their size, as well as other contributing factors such as complexity of colour and shade. The design of a webpage will decide on the actual display size, the visual aesthetic will likely dictate the complexity and style of the image itself. We will therefore need to ensure that we prepare the visual and optimise it for all sizes required.

There are various steps involved in preparing the image. We will first crop or scale the image to the right size, likely saving it to the largest size required by our design. We might edit different versions for different dimensions for display on mobile devices, or for portrait or landscape modes. And lastly, we will compress the image for a lower files size. We can do this once in the image editor and then use a dedicated app to further reduce file size. The last steps will need a keen eye to ensure that the image remains high quality as compression can cause blurring and pixellation.
For more details, see bitmap graphics.

working with SVG

Vector graphics are typically used for interface icons and CTAs [1], ensuring easy scalability for uses on large as well as small screens. The learning curve can be a little steep as the Bézier curve[2] can seem counter-intuitive. However, patience and practice will get us there and in the end, the pen tool will become our friend and the vector tools will allow us to create vector graphics with ease.

SVG online editor

To get started with vector graphics, check out this lovely little online app which is open source, and currently maintained by Mark McKay ~ thank you, Mark ツ

Method Draw is a simple and easy vector editor for the web. Use Method Draw online, no registration required. It is open source and you can find the source code on GitHub.

free SVG editor online app screenshot.

time, patience & practice ツ

The vector pen tool might present a challenge to get to grips with while you are not used to it. But time, patience and practice will pay off. This is definitely one of those tools where gaining muscle memory will help ~ learning and practising by tracing shapes with different lines, angles and curves will be the most productive approach. Start simple and repeat the exercises till you're comfortable. Then move on to more complex drawings.

The following tracing templates are quite old by now – yet they are still very popular. I'm being told they are brilliant for getting you past the first hurdles – give them a go! You’ll soon get there ツ

bezier curves.

The elements to be traced are 'guides' ~ their colour set intentionally to bright to allow you to use black as stroke colour and easily see your newly created lines. If this does not suit you, you can adjust this colour via the settings: top menu > Settings > Guides & Grid.

download files:
tracing templates: .ai/.svg - .zip, 1.3MB

You're welcome to download video tutorials from an online course I published many years ago (quite old too, quality and audio levels are not great).

bezier curves.

There are 8 short videos which cover drawing with the pen tool, and how to use the transformation and pathfinder tools. An old version of Illustrator is used but the techniques covered have not changed.

download files:
video tutorials: MP4 - .zip, 156MB

screenshot of Adobe tutorial. There is also a video tutorial by Adobe which will teach you how create straight and curved paths: Start creating with the Pen tool.
It covers stroke and fill as well as how to edit the control points. Files are available to download to allow you to work along with the tutorial.

My advice is to persist and learn how to work with vectors. It might take a little while but it will be well worth your time and effort. SVG is now one of the most popular file formats for anything from interface icons, to data visualisations and visual design for interactivity and motion.

Pen game screenshot.

The Beziér Game: A game to help you master the pen tool.

Boolean game screenshot.

The Boolean Game: learn shape building.

Simplifying the visual

Depending on the complexity of the graphic, vectors can be quite heavy in file size due to the many control points that the visual might include. It is therefore vital that we edit the final graphic before optimising the SVG code itself. This means removing any unnecessary elements, simplifying the graphic by merging elements where possible and aiming for as low a point count as possible.

The following tutorial goes through the steps of creating a large contact button, via videos and step-by-step instructions. Firstly, creating a custom '@' symbol from the lowercase letter 'a', adding the curved line and then proceeding tidy up the graphic read for online use. Secondly, the sprite image is created and implemented via CSS. Lastly, a demo shows the use of SVG images, followed by a list of recommended reading.

Mega contact CTA with SVG sprite

get in touch

download outline of steps as PDF

#1: edit type:
font to vector shape

  1. new file: 512x512px, RGB
  2. type lowercase 'a' and set typeface to IMPACT
    set large / scale up and centre align to artboard
  3. make copy of letter for comparison
  4. select copy and create outlines:
    (cmd/ctrl + SHIFT + O) /or/
    top menu: Type > Create Outlines

#2: add curved line:
editing path & stroke

  1. delete font version and draw circle around the letter with the Ellipsis tool (L), adjust fill to none and stroke to black
  2. select both elements and centre align
  3. select scissor tool (C) and click the bottom-most anchor point of the circle
    this will split the points and open the path for editing
  4. use the direct selection tool (A) to edit your path to fit, adjust stroke weight accordingly
  5. set the end cap and experiment with the stroke profiles, switching direction as required
  6. try out the width tool (SHIFT + W) to edit the tapering of line by clicking and dragging the stroke
  7. make a copy of the currently editable version, lock and hide and keep as easy way to work on fresh edits
  8. select the path with your final stroke settings applied - and expand stroke:
    top menu: Object > Path > Expand Stroke
  9. tidy up the graphic, switching back and forth between preview/outline views
    (CMND/CTRL + Y)
  10. to simplify graphic, select both shapes to merge via UNITE pathfinder
  11. further optimisation via reducing anchor points:
    top menu: Object > Path > Simplify
  12. save as for SVG + export as for PNG (fallback)

#3: SVGOMG:
optimise SVG code

At this point, we only have a single graphic, our icon itself. If we wanted to use it as it is, we could simply optimise it and add it to our page. For the sprite set up, check the next steps.

  1. open SVG in code editor
  2. save file as v2 + copy all code
  3. in your browser, go to SVGOMG
    and paste code to optimise
  4. copy optimised code, paste into v2 + save
    compare code - optimised file, ready to go :)

Using the sprite[3] method allows us to combine several graphics into one single SVG file and implement the visuals via code. Depending on our method, we can then use CSS to control the SVG. This technique can be used to present static graphics, interactive motion effects and even animation.

The principle of sprites is simple: a single file contains multiple images which can vary in size/proportion. The X (horizontal) and/or Y (vertical) coordinates are used to control the position of the image's content to display the relevant portion of the graphic, if required at set time intervals.

sprite artboard.

#1: sprite dimensions:
setup of artboard + guides

  1. set up new folder for the sprite
  2. make copy of icon file and open in vector app
  3. set up one new artboard for the sprite visuals:
    512px remains the set width - the height will triple to accommodate the icon 3 times: width: 512px; height 1536px;
  4. copy icon onto new layer and move onto new artboard (lock layers no needed for edit)
  5. create a 512x512 square with coloured stroke to use as alignment guides; copy two times and align evenly with artboard; name layer 'guides' and lock

#2: sprite visuals:
editing visuals + save SVG/PNG

  1. add a circular outline and scale/align icon graphic inside
  2. make a copy of both, align centre of the 2nd square; note: use 'align to key object' option.
  3. edit 2nd icon for changes on roll-over; optimise as always (expand stroke/merge/simplify path)
  4. make one final copy for the 3rd state; edit to suite.
  5. export as PNG (for fallback) and save as SVG; optimise the code (SVGOMG) and save final version into your webfolder

#3: CSS sprite:
CSS roll-over using SVG + PNG fallback

  1. download the empty HTML page, or create your own;
    setup requires one custom link.
  2. set type and layout for link
  3. set background colour + add PNG fallback
  4. add the sprite SVG as background image
  5. remove background repeat and set size to 256px
  6. adjust padding to position text and add border radius
  7. add transitions to link element, set as required
    NOTE: transitions should be set specifically and not affect background-position to avoid 'scrolling' of visuals
  8. edit alignments for visual appearance
  9. add changes to :hover: adjusting colour and radius and shifting the background-position vertically to reveal the 2nd visual
  10. add changes to :active + :focus: adjusting colour and radius and shifting the background-position vertically to reveal the 3rd visual
  11. test - tweak - and done.

For browsers which do not support SVG (check caniuse.com for details), we'll use a PNG again as fallback ~ via this clever approach from css-tricks:

background: url(fallback.png);
background: url(background.svg), linear-gradient(transparent, transparent);
This combines two features that, together, target the perfect combo. If a browser supports both multiple backgrounds and linear gradients, it supports SVG too. So here we declare the SVG with a completely transparent linear-gradient. If that fails in an older browser, the fallback declared above will kick in.
You might add a slight performance hit on modern browsers from having to calculate the transparent gradient, but it's probably negligible. quoted from A Complete Guide to SVG Fallbacks.

Note: this approach will likely stop being necessary once the browsers catch up. However, depending on how far back your support will need to reach, this is still a nifty solution to bear in mind.

Sprites also offer a very efficient method to implement icons for clear and accessible links, be that as part of the interface or to highlight specific links. By using a single file for multiple visuals means a single call to server only. Once cached - all visuals are ready and loaded, great for performance.

Let's take the example of links for downloading an image in a specific format. To present clear and accessible links, we can use a visual reference to show each file format as icon, assigning these via CSS automatically by link destination. Combining these icons into a sprite image will keep this light and fast :)

To use one sprite sheet for any icons used on our site, we'll combine all graphics into one file. The layout of the graphics is flexible though a clear grid helps with easier coordinates. To finalise the file, we'll optimise the SVG as always and consider our final design and setup to decide which method to use for the SVG.

via SVG background

via inline SVG / definitions

recommended reading

  1. #SVG articles on sarasoueidan.com ↗
  2. A Complete Guide to SVG Fallbacks ↗
  3. SVG `symbol` a Good Choice for Icons ↗
  1. SVG on MDN ↗
  2. Practical SVG by Chris Coyier ↗
  3. SVG articles on A List Apart ↗

SVGOMG Don't forget to optimise your SVG - always ツ svgomg icon

footnotes

  1. CTA stands for 'call to action' - this could be a sign-up button for a newsletter subscription, or a sales prompt like a 'buy now' button.
  2. named after French engineer Pierre Bézier, the parametric curve defines a number of set points to create a continuous curve via a formula.
  3. originally used in frame-by-frame animation, sprite is a technique used to display different images by using a single image file that contains multiple graphical elements or variations and changes according to state or interaction.

preparing photographic images

Photographs taken with any kind of digital camera will be quite large and heavy due to the inherent high quality. For example, a typical photo, taken at medium to high resolution, could be about 3456px × 5184 px in size (and much larger) and weigh anything between 10MB to well over 100MB. The high quality is ideal for photo editing and print when the file size itself does not matter.

Images on the web, however, form only part of the webpage and should be sized as large the maximum dimensions required only, and be optimised for a lighter weight. Preparing images for the web is a compromise between quality and file size – a juggling game in which we will try to keep the maximum quality while compressing the file to achieve as low a file size as possible.

image view & actual size

Not all images are too large for the web. If the image comes from the web already – it might even be too small to be used as planned. And we need to remember that while quality is less affected when we scale the image down, it will deteriorate when enlarged. We will have to check on the image size itself to confirm that it will work for our purpose.

When we first open our image in the editor – the file will be shown at a certain zoom factor to allow us to view the full image. A large image will be shown zoomed out by quite a lot, a small image might be zoomed in and appear blurry. Usually we will find the details of this within the application. In the online photo editor Pixlr[1] (as shown in the following screenshot), we can see the zoom factor and pixel dimensions of the image in the bottom left corner of the open file’s window.

screenshot of open image in Pixlr editor.

To get a sense of the real size of the image as displayed on screen at full size – we can set the zoom factor to 100%. If only a part of the image is visible, the dimensions are too large. If the image is presented at a very small size – it is likely to already sized and optimised for the web; and could possibly be used as is.

resizing the image

To resize our image at its original aspect ratio[2] – we can use the ‘image size’ dialog box. This will allow us to set a new size and scale down our image. If the existing aspect ratio fits our content and plans for presentation, this option will be sufficient.

To get an idea what size we will need – we have to consider our design, the layout on the final webpage. If we are showing the image as a small preview of the original on the page – and plan to offer the large view elsewhere (as a feature header image, for example) – the largest view required will determine the new size of our image.

We must consider our target audience and their typical setup to decide on the large view of our images. Screensizes[3] vary widely and will need to be part of our image editing planning. We have to remember that we are aiming for a low file size and only set the image as large as we will need it, not any larger for the sake of ‘just in case’. Focus needs to be the optimisation for the web, light file size for fast loading pages as well as a sustainable approach to online presentation.

aspect ratio / image crops

To edit our images to specific sizes, such as the typical aspect ratios 16:9 / 4:3 or other custom sizes, we can use the crop tool. Crop tools often offer the most popular sizes as presets, and allow us to enter your own details – making this a breeze.

screenshot of crop options in Pixlr editor.

design considerations

When we edit an image’s size and aspect ratio – the impact and expression of the image will be altered to some extent. If we are free to work with any dimensions and are looking to crop our image – we must consider not only the page layout but also the context. Our crop will allow us to increase the impact of our image, to enhance its meaning and expression and integrate it into the context of the webpage. This could be very even sizes photos for a gallery, for example, or large images as headline feature for a written article.

One popular principle used in photography is the rule of thirds[4] which might be one method to use for our crops. This divides the image into nine equal sections and uses the lines and intersections as guide for the placement of the subject/s of the image. many crop tools will show guide lines to aid our framing of the subject in hand. The precise size needed for our purposes specifically will depend on the setup and design of our website.

web-optimised file formats for bitmaps

There are a few options when saving our images for the web. The best final format for our optmised image is always the one that keeps the highest quality at the lowest file size.

For the final optimisation, we use the ‘save for web’ option our image editor offers. This is also called ‘save for web and devices’ or ‘export for web’, usually found under the ‘File’ menu. Some editors will then show a preview to compare the original file with the optimised version. This will allow us to tweak the compression level and quality settings while viewing the final output for image quality and file size.
And finally, it will be worth using one of the optimisation tools available to optimise the file further.

Step-by-step recap

Step 1: check properties of the original

View image file in a finder window/window explorer and find out the original file format, size/weight and dimensions. Our sample photos here is a JPG which can be presented on the web, but its file weight is too heavy and the dimensions too large.

screenshot of image and details.

Step 2: crop/resize to final display size

To optimise the image in chosen editor. Edit the image’s size to fit our plans in any way we prefer: use the crop tool alone with specific dimensions / crop first – then resize further / use resize alone.

screenshot of image and crop tool options.

At this point, we'll then also prepare any other formats/dimensions we might need for the final site.

Step 3: save for web

Once our file is ready, perfectly sized and edited – we can proceed to ‘save for the web’ / save in a web-safe format. This process will vary slightly between editors, importantly we need to make sure to check the final file for quality.

This final step is a compromise between quality and file weight. Our aim is to keep the highest possible quality while optimising the file for the lowest possible file size.

screenshot of save for web options.

Before getting more used to this process, it will be worth saving several copies at varying levels of compression for comparison. It's a good idea to do this at this stage and review our final files later on, or another day, with fresh eyes.

screenshot of image at different sizes.

Step 4: final optimisation

Once our file is saved for web its size is already lower than its original size. Using an optimisation tool will allow us to reduce the file weight even further. Most of the following tools are very straight forward to use via a simple drag/drop and will execute their compression functions automatically.

optimisation tools

art-directed edits

There are various factors that will affect the final weight of a photographic image. In some cases, it will not be possible to edit our images substantially as the context of the site demands the image as given, we have to focus on sizing and optimising alone. However, in many cases it is worth considering whether editing the image can enhance its effect and impact while reducing the inherent file weight at the same time.

full colour vs black & white

One contributing factor to the weight of our image is the amount of colour within. A full colour image will always be heavier than a desaturated version with only limited colours.

In the following example, looking at the original file, the full-colour version is quite heavy at over 7MB. Editing the image as black & white version—even when keeping the original, large size—the result shows a dramatic difference in file size.

screenshot of full colour and black/white image + file weight.

This is a great technique that allows us to experiment with full or only partial desaturation. Before editing our images however, we do have to consider whether the resulting image in its desaturated form will fit our context. Black & white photos can be very effective but will convey a different effect or mood compared to the full colour version.

screenshot of different saturations + file weight.

Limiting colours, or using mono/duotone treatments will reduce the file size but it is essential not to alter the original intent and meaning of the image in its final context. Sepia images, for example, can add a sentimental feel, often speaking of time gone by which might not fit when presented as part of the full content.

focus & blur

Another contributing factor to heavy file sizes is the detail and focus shown within the image itself. A close-up photograph which fills the image with lots of detail, colour and shading will be quite heavy and apart from scaling down its dimensions, it can likely not be edited much.

When the image is edited to use depth of field[5], for example, blurs are added, reducing the amount of detail. This is an established and very effective technique which is primarily used for art direction purposes, and has the added advantage of reducing the file size, too.

screenshot of depth of field + file weight.

Again, this is another technique which can alter the original image’s expression and can only be used when fitting. It is typically used for product shots, to focus on detail for promotional reasons. Depth of focus can be done during the taking of the photo, or applied afterwards in an image editor.

Not all images will benefit from the application of blur – but it can be worth experimenting a little, to edit the image which might increase its message. Returning to the earlier sample image – we can see the difference between the full sharp image, and the version with blurred outer areas.

screenshot of blured section + file weight.

The blur now puts a stronger focus on the figure and railway and might work well. Of course, it might not be fitting its intended context at all and can therefore not be used for the sake of saving file weight alone.

These two techniques are worth exploring only if the end result will work for the intended purpose and expression of the image within the context of the overall content. When fitting however, we can increase the impact of our images and enhance their message, with the added bonus of a light file weight.

footnotes

  1. Pixlr is an online photo editing application, part of a collection of tools available as freemium (options to use limited functions for free, or access all for a subscription fee). It can be used for optimising images for the web.
  2. Aspect ratio refers to the proportional relationship between the width and height of an image. It is stated as a ratio of the width to the height. For example, a 4:3 aspect ratio means that the width of the image is 4 units and the height is 3 units.
  3. screensizes vary depending on the device used and its inherent resolution, see Screen Resolution Statistics, by Rapid Tables, for an overview of common screen resolution statistics.
  4. covered in Chapter 1: design principles: Composition in web design.
  5. depth of field is a photographic technique which uses distance and different levels of sharpness to focus on subject.

beautiful textures

Images that are part of the content or are to be included as large visual features, such as headers, will require set proportions and need to be optimised to fit the final design. However, when it comes to images that enhance the design - there are a few techniques that allow us to optimise by repetition.

Textures[1] and patterns[2] can form a custom background or be used as borders by using a small-scale image that is the displayed multiple times. The repetition of the image can be done vertically, or horizontally only, or repeated in both directions. For example, if the webpage is to have a paper texture, we can create a single visual that repeats to cover the entire area. The image needs to be produced specifically for this purpose to become a seamless pattern.

The following slide deck includes tips on preparing such images. Next up is a tutorial that you can work through with given files to implement a set design with multiple images, all applied as background images via CSS.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 2.8MB (optimised) PDF, 17.2MB (original)

Steps covered:

  1. file organisation
  2. sketching & planning
  3. creating seamlessly tiling textures
  4. adding repeating illustrations

working multiple background images

Depending on how you prefer to work through this tutorial, you can choose to download only the images and follow the tutorial for all code. Or download the project folder which in addition includes full HTML and partial CSS (to be edited).

download image files: ZIP, 832kb
download webfolder: ZIP, 836kb

The final design is for an error page and shows a message with a search box, presented in a sign suspended from a balloon hovering over a landscape. At the top, there is one large cloud with a few smaller clouds scattered over the sky. We’ll also keep the ‘404’ on the page to indicate the error. Our hidden surprise is to use a subtle parallax effect to shift the position of the mountain peaks, hills, and the clouds when the browser window is resized.

screenhot of final design

HTML structure

Let’s start by setting up the HTML page, getting our boxes into place. Considering the content first, we can keep to three core boxes:

  1. one wrapper DIV which will contain all page content
  2. an article for the text and search box
  3. a footer for the 404 error
body, div and footer elements
<body>
	<!-- START content wrap -->
		<div id="wrap">
	<!-- START article -->
			<article>
				<h1>Dear Traveller,</h1>
				<p>apologies for the interruption in your journey. We seem to have lost our way a little.<br>
					Please type in your desired destination and we'll take you there.
				</p>
				<form>
					<input type="text" value=". . ." id="search" onclick="this.value=''" />
					<input type="submit" value="take me there ☞ " id="searchsubmit" onclick="search.value='. . . '" />
				</form>
			</article>
	<!-- END article -->
	<!-- START footer -->
			<footer>
				404
			</footer>
	<!-- END footer -->
		</div>
	<!-- END content wrap -->
	</body>		

With the HTML done we're set.

screenshot of HTML only page.

Content styling

Let’s start by styling the content first and then proceed to adding the images. We start the CSS by adding the reset and then continue to add the rules for our design. All content is placed on the sign suspended from the balloon – we will set the width of the wrapper DIV to be a minimum of 150px, adding a percentage for smaller/larger screens, and centre it within the window. All content has a generous outer spacing to allow for good legibility as well as the addition of our border graphics later on.

/* content wrap */
#wrap {
	min-width: 150px;
	width: 28%;
	margin: 0 auto;
}
/* main content */
article {
	border: 1px solid #461200;
	background-color: #d4d4d4;
}
article h1 {
	display: block;
	width: 76%;
	margin: 1.8em auto .2em auto;
	font-size: 1.26em;
	font-style: italic;
}
article p {
	width: 76%;
	margin: 0 auto 1em auto;
	font-style: italic;
}
/* search box */
article form {
	display: block;
	width: 76%;
	margin: 1em auto 0 auto;
}
article input {
	display: block;
	width: 96%;
	margin: 1em auto 0 auto;
	padding: .26em;
	border: none;
	border-bottom: 1px dashed #cc5100;
	background: rgba(255,255,255,.4);
	font-size: 1.36em;
	color: #1d3d89;
}
article input:hover, article input:active, article input:focus {
	background: #fff;
	color: #531900;
}
article input[type=submit] {
	display: block;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 2px solid #cc5100;
	font-size: 1.46em;
	line-height: 1.2;
	margin: .5em 0 2.36em 0;
	color: #cc5100;
}
article input[type=submit]:hover, article input[type=submit]:active, article input[type=submit]:focus {
	cursor: pointer;
	color: #1d3d89;
	font-style: italic;
	border-color: #531900;
}
/* footer */
footer {
	text-align: center;
	font-size: 3em;
	line-height: 1;
	color: #ccc;
	color: rgba(255,255,255,.2);
}					
		

Our page now shows all content neatly grouped and centred within the browser window.

screenshot of basic formatting.

Adding the visuals

Before we can get stuck into adding our images let’s have another look at the design and figure out how many images we will need.

Image break down:
  1. background image – sized to fit the window
  2. cloud – large cloud visual, centred within the window
  3. scattered clouds – several smaller clouds, flexible positioning
  4. peaks – repeated horizontally, flexible positioning
  5. hills – repeated horizontally, flexible positioning
  6. balloon – centred above the page content
  7. sign background – tiled
  8. 4x corner images – positioned into each of the four corners of the sign
overview of image elements.
1. background image

The background image shows a soft texture with a subtle gradient, lighter at the horizon and darkening towards the sky. In order to maintain this shading we'll scale the image to fill the window.

As the visual sitting at the very bottom of the image stack we will apply this to the tag. To ensure that the HTML box will fill the window, regardless of actual content height, we will set the width and height to 100% and apply the background image as follows:

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
/* --------------------------------
separate rules to keep FF happy
-------------------------------- */
html {
	background-color: #447d9a;
	background-image: url(imgs/bg.jpg);
	background-repeat: repeat-x;
	background-size: cover;
	background-attachment: fixed;
}			

Note that the rules are written very specifically, avoiding the shorthand approach. This is necessary to avoid problems with Firefox.

page with main background image applied.
2. cloud, peaks and hills

Now we’re getting to the fun part, and the point of this tutorial: the use of multiple background images, applied to one HTML element – but there are a few things to consider first.

Browser compatibility:

Luckily, at the time of writing, the use of multiple background images is supported by the latest versions of all common browsers. If a browser doesn't support multiple background images, it will ignore the entire property. It's therefore advised to set a default background first, even if only for colour, and then overwrite it with the multiple background images which will be implemented by all compatible browsers.
For more detailed information on browser support, see caniuse.com.

Stacking order of multiple background images:

To apply several images the standard background property is used, listing the images one by one, separated by commas. If you want to specify a background colour it will need to be set last and without the preceding comma.

background: url(img1.png), url(img2.png), url(img3.png) #fdfdfd;

When applying more than a single background image to an HTML element a set stacking order will become apparent. Contrary to what you might expect the order is reversed to the HTML stacking order where the first element listed becomes the bottom most layer.

For the CSS3 multiple images however, the first image you specify will become the top most image, with the second image positioning itself underneath, the third image again below the first and the second and so on.

illustration of stacking order of images.
Controlling positioning and repetition:

Controlling the additional properties of the images – we can either use shorthand, or a second declaration.

Shorthand CSS:

background: url(img1.png) top left no-repeat, url(img2.png) bottom left repeat-x;

Separate declarations:

background: url(img1.png), url(img2.png);
background-position: top left, bottom left;
background-repeat: no-repeat, repeat-x;	
Back to our design:

Taking another look at our design, we'll need to be clear on how the visuals are to be stacked.

illustration of stacking order of images for clouds and hills.

First we'll need to specify one of the visuals as background image for browsers that won't be able to implement the multiple background images. Overwriting this property we can then proceed to list our images in our preferred stacking order:

body {
	background: url(imgs/peaks.png) bottom center repeat-x;
	background: url(imgs/cloud.png) top center no-repeat,
			url(imgs/clouds-scatter.png) -46% -330px repeat-x,
			url(imgs/hills.png) bottom center repeat-x,
			url(imgs/peaks.png) bottom right repeat-x;
}	

Both the percentage and the left / right positioning of the images will now show the parallax effect when the window is resized. And best of all, no additional mark up was required!

page with hills and clouds added.
3. Custom corners

The background for our design is now complete. Time to finalise the content wrapper, adding the balloon and the sign’s custom corners. Positioning the content itself lower within the page will free space for the balloon visual which is applied to the wrapper DIV and positioned into place.

/* content wrap */
#wrap {
	min-width: 150px;
	width: 28%;
	margin: 0 auto;
	padding: 150px 0 0 0;
	background: url(imgs/balloon.png) center 85px no-repeat;
}
/* main content */
article {
	border: 1px solid #461200;
	background-color: #d4d4d4;
	margin: 150px 0 0 0;
}

Our final step is to add the custom corners to the sign, framing the content text. With a fixed sized element the solution would be simple, one plain image would be enough. But as we’d like our content box to remain flexible and resize to the window width, as well as resize when the text is enlarged, we'll need to apply each corner image separately, allowing the box itself to remain scalable.

Before the support for multiple background images this would have been another headache and dilemma. You might remember doing some nasty things when creating rounded corner boxes? Polluting your code with presentational markup?

No more. For these corner graphics we can now easily add four images, a separate graphic for each corner. Again, we need to choose one image to be applied for older browsers and then add the corner visuals in one by one, setting the background last.

article {
	border: 1px solid #461200;
	background-color: #d4d4d4;
	margin: 150px 0 0 0;
	background: #d4d4d4 url(imgs/sign-bg.png) center repeat;
	background: url(imgs/sign-border-tl.png) top left no-repeat,
			url(imgs/sign-border-tr.png) top right no-repeat,
			url(imgs/sign-border-bl.png) bottom left no-repeat,
			url(imgs/sign-border-br.png) bottom right no-repeat,
			url(imgs/sign-bg.png) center repeat;
}		

And all done ツ

final design in place.

Happy designing and coding!
→ view final

footnotes

  1. Textures are visual elements which aim to imitate real life materials such as paper, leather, wood or similar tactile surfaces.
  2. Patterns are repeating graphic elements that form a uniform and seamless repetition across a large area, similar to ornate wallpapers.

SVG

To learn more about SVG check out the articles and tutorials on MDN:

SVG: Scalable Vector Graphics

embedding images

The <img> tag is the most basic way to embed an image into a webpage and should be used when the image is part of the content. It includes the <src> attribute which contains the path to the image file, as well as the <alt> which will describe the image's content. This text is shown on the webpage should the image fail to load, and is the additional information added for screen reader users. In addition a <width> and <height> attribute is added to ensure better performance and allow the browser to consider the space required for the image to be presented, mitigating layout shifts.

example size, weight and markup:

This photo has been saved at a 1:1 aspect ratio (square) with an equal width and height of 1024px, saved as JPG and compressed to 174kb.

<img src="vis/chapter4-visuals/mushroom-on-tree-sq.jpg" width="1024" height="1024" alt="mushrooms growing within tree trunk."/>

Always include the alt-text and end it with a period. This will make screen readers pause a bit after the last word in the alt-text, which creates a more pleasant reading experience for the user.

mushrooms growing within tree trunk.

When you are new to coding, the above code will be all you need and will serve you well. However, there are many other methods to add content images to a webpage and add more details. Check out the following links when you feel you're ready to dive in deeper. <img>: The Image Embed element <figure>: The Figure with Optional Caption element <picture>: The Picture element

the CSS property: background

Find out more about the background CSS property to set the different background style properties, such as color, image, origin and size, or repeat method.
background { ... }