Chapter 4: Working with visuals

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

• JPG
  an established and widely compatible format, use for photographs and graphics with shaded areas and soft transitions of colour/brightness
  NOTE: often the best format for quality and file size; we have to bear in mind that once downsized and saved as JPG, we will not be able to scale it back up again.
• WEBP
  a relatively new and very efficient format with great compression rate and usable for all images, supports great colour depth as well as transparency
  NOTE: excellent compression but we need to make sure to quality check the output carefully, can result in pixellation.
• PNG/PNG24
  includes full transparency
  NOTE: use only when needed; can result in high/heavy file size (best optimised again before use on site)
• GIF/PNG8
  includes transparency but needs matte colour set
  NOTE: use only for transparency on solid colour backgrounds
  

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.

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.

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.

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.

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

• XnConvert
• image converter
• by XnSoft
• PC / MAC / Linux

• JPEGmini
• image optimisation tool • jpg
• by Beamr
• PC / MAC

• RIOT
• image optimisation tool • jpg / gif / png
• by RIOT
• PC / MAC

• imageOptim
• image optimisation tool • jpg / gif / png
• by Kornel Lesiński
• MAC

• cloudconvert
• online file converter
• by Lunaweb GmbH
• online

• compressor
• Fast & efficient image compression
• by compressor.io
• online

• imagify
• Image optimization for everyone
• by wp-media
• online

• squoosh
• image compression web app
• by GoogleChromeLabs
• online

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.

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.

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.

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.

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.

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.

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.

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>
<!-- 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.

Content styling

Let’s start by styling the content first and then proceed to adding the images. 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.

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

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: 0px;
	margin: 0px;
	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.

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.

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.

Controlling positioning and repetition:

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

Shorthand CSS:

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.

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!

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 ツ
Happy designing and coding!