Introduction to Digital Imaging

Lesson 3: Producing images for the web

Introduction
This lesson introduces you to the issues related to preparing images for web publishing.

Making Artwork for the Web
It's fair to say that the web relies heavily on textual data. About 95% of the content on the web is written. (link to an article, by Oliver Reichenstein, October 19, 2006).

You can do a lot with just text. Add to that CSS, web fonts, SVG (scable vector graphics) and it's possible to completely avoid using photos/ bitmap artwork to get your message across.

However, photos and detailed artwork can add another level of interest and value to your site and Photoshop is still the best tool for the job and has the widest user base locally (Aus) and globally.

There are alternatives to Photoshop however

Small Files
One of the convenient things about producing images for the web is that they're all relatively small files. We don't need to work with massive pixel counts and we deal with the three-channel RGB colour mode and either jpg, gif or png format files.

In contrast, when you're in the print / pre-press industry you have to work with all sorts of file formats, the CMYK model, huge files, clipping paths, eps, postscript, plates and spot-colour. Thankfully, Web image formats are easy to work with in comparison.

The one negative aspect of working with images for the web is needing to be acutely aware of file sizes. In web / mobile publishing, reducing file size is a critical step in production.

 

File sizes and compression; the big compromise
Understanding the relationship between image quality & file size is vital. The most important goal when preparing graphics for the web is to MINIMIZE FILE SIZES. This is crucial. This relates directly to web hosting costs. If you're sending artwork to a printer, file size isn't an issue anymore.

However, if you're designing for the web you need to compress and optimize your artwork to get the file sizes down.

Does file size really matter overall ?
If you optimize the compression of an image this small gain makes a big difference. This is most evident where a web banner .jpg with a compression quality of 60 is replaced with the exact image but reduced to 30 jpeg quality.

The file-size saving might be 250 bytes which doesn't seem worth the effort but if the banner is used on a low-to-medium-traffic website with 500 page accesses per day 24/7, 365 days a year the data reduction amounts to 45.625MB per year! Just for saving a jpg at a lower compression! If you have lots of images the savings can be massive.

Optimizing your image compression may reduce your data useage and hence cost you, or your client. Any high-volume website will have a workflow that ensures the image compression and file sizes are optimised.

Ideal image sizes for the web and avoiding desktop browser horizontal scroll bars.
As a rule of thumb, for web users with desktop monitors, your biggest photos need to be less than around 900 to 1000 px wide, this is a conservative size which generally doesn't force a user's browser to automatically introduce horizontal scroll bars. Of course this ideal image size depends on the target audience. If you know your users have a big browser then the images can be bigger.

Note: There is a way now to force the browser to expand or contract image size according to the browser size; most desktop browsers now support the CSS3 code...

background-size: cover; background-size: contain;

...which tells the browser to re-size the image to fit the container it's in. This means for certain web images (backgrounds) if you use this approach size doesn't have to be all that precise.

In addition, "breakpoints" can be specified that swap big images for small ones according to the user's device. This is achieved using CSS code. Breakpoints and CSS are a significant part of Responsive Design. We introduce this later in the web publishing module.

Formats for the web: jpg, gif, png & svg

mueck artwork; 2 old ladies 1/2 sizeThere's no such thing as a standard image format for the web.

jpg
As a general rule use jpg for photos or images that have lots of gradients/ tones. Here's a good link to help you understand formats for the web; approx. 10 mins.

gif (pronounced " jif " )
As a general rule, use the gif format if your image has few colours, few gradients, lots of single colour with a bias to the horizontal (horizontal stripes for example).

gif also supports animation (link to giphy)


One of gif's lesser strengths is its transparency option; one colour from the gif palette can be used as a transparent colour which means you can overly gifs onto other artwork. It's not the best format for this however. Which brings us to PNG.

 

PNG
This image format is great if you need images with convincing drop-shadows or opacity on a web page. png in blue w drop shadowPNG uses Red Green & Blue channels and an additional colour channel known as the alpha channel which delivers accurate transparency.

What this means is that a png image can be fully or semi transparent or have a very smooth drop shadow that when placed over other artwork provides the illusion of depth (see PNG logo above).

The downside is a png takes a lot of computing power to display and slows the user's display system down. Especially if you're using PNGs in an animation.

Another downside is PNG file sizes are also relatively large compared to jpg or gif so use them wisely.

Here's a lengthy and detailed examination of the use of png formats on the web; it's a 20 min read. It also includes html/ css coding examples of how to implement these effects so it might be "heavy going" for those with little coding exposure. Coding will be introduced in the web publishing module.

SVG
Scalable Vector Graphics is a format that's relatively old (1999) but only recently has it seen wide acceptance. This is due mostly to Google expanding its algorithm to include svg formats. The image opposite is in SVG format. SVG artwork is scalable up or down with no loss of quality.

Mozilla's Developer Resource explains SVG in detail.

Learning Task: Image Compression Experiment (2 hrs)

Take two photos using the same camera pixel-count and same settings for both. Take a photo of a busy, detailed scene, then take a photo of a plain scene. Ensure they're captured using .jpg format.

Download to your computer and compare file sizes. How do you explain the difference in file size? Your camera is capturing the same number of pixels, so why would the file sizes be different?

How does this influence the way you take photos if your brief requires relatively small file sizes?

https://www.flickr.com/people/126433814@N04
Assuming you were given a brief to take a product shot of a "retro city car" that had to go into a web advertisement and you needed to ensure file sizes were small, describe a suitable and a not-so-suitable background you might use.

 

Submission Guide
Publish both photos to your blog as 60 quality jpgs, 500px wide with captions describing why you think the file sizes are different. Then email your teacher including your blog URL.

Chris Adams 2017

 

Learning Task: Photomontage | web image formats (approx. 9 hrs)

Introduction
This task is an opportunity to practice making selections, combining images using Layers and comparing image formats. These skills will come in handy for the "populate a wireframe" assessment at the end of the module.

Take ten original photos all using a single theme, your choice of theme.

In Photoshop, compose your ten photos into a single image, either portrait (1920x1080) or landscape (1080x1920), RGB mode.

Layers in Photoshop
Terry White's Photoshop screen showing footballer
If you're new to Photoshop this demonstration of working with Layers from Terry White (Adobe Instructor) may help. 56mins.

Compare Formats
With your design finalised, in the FILE / Save for Web dialogue box, compare file sizes using the following formats:

  • file/export/save for web (legacy) as jpg 50 quality.
  • Save for web as gif, 256 colours.
  • Save for web as .png 24.

Submission Guide
Publish your artwork to your visual diary blog in the format that gave you the best quality / file size and caption your image with a Design Rationale (explain the design choices you made) and explain why the file format you chose was the best option.

Submit your blog URL via email.

 

Chris Adams 2017

Creating Artwork for the Web

Creating artwork for a web page is a very common task for web designers. From tonally-correcting, colour adjusting and cropping photos to making custom graphics that add interest and additional meaning to a layout.

Backgrounds
The page you're looking at uses a small image (opposite) that repeats seamlessly in the background.

Web Designers use this method a lot. Why do you think this is?

If you're looking for royalty-free seamless tiles, check out subtle patterns. You can use them with just Creative Commons 3 attribution. https://creativecommons.org/licenses/by-sa/3.0

Combine this method with overlaid semi-transparent .png artwork and the effect can provide depth and volume. You'll get to try this out further on in this lesson.

Making backgrounds for a web page

Before we explore creating backgrounds you need to understand that a web page has a background colour (the default is white) and then it can have an image over that and indeed, other items on top of that just like Photoshop layers.

Changing the background of a web page is done using html / CSS. This is covered in further detail in the web publishing module.

Here's an example from Wendy (Cert3Media 2009) simply dragged into a browser window without any html or css coding to position it.

It's a powerful image with rich textures and colour but as a background it fails miserably! It's too busy and would overwhelm anything else on there. The notion of backgrounds acting as supporting items is covered in detail in the Design Module.

Backgrounds need to be subtle to allow the important content to have emphasis.

Making a busy image work as a background
To make Wendy's image work as a background it needs to change.

The example "Turning Japanese" (below) is a dramatic treatment of the original; it's been scaled up, reduced in saturation and had a further white screen superimposed on it.

same image with 930 wide red middle

It loses a lot of the original's vibrancy and detail but there's sufficient information there to add meaning to the overall design. These are the concessions you have to consider when making backgrounds. The key thing is it now allows the important items to maintain their place in the layout hierarchy. Layout hierarchy will be explored further in the Design Module.

Layout hierarchy, put simply, is where items in a layout have different levels of emphasis thanks to their position, scale, colour and nature of item.

Methods for Creating Backgrounds:

There are several methods to consider when creating a background image for a web page and each is driven by the need to keep file-sizes down.

Method 1 | Big Image

This uses a large (1600px + wide), non-repeating image like the "Turning Japanese" example above. The image is tall and wide enough to prevent the user seeing an "edge" at the bottom or sides where the image stops and reveals the backgound colour.

If the user has a monitor bigger than the image then the browser background colour (usually white by default) can be seen.

The background image either needs to be wider OR make the edges recede into the background colour using a smooth gradient.

Note# Since the advent of CSS3 web designers have discovered how to get a background image to expand to fit a browser window.

See w3schools for how to do this. This is covered in more detail in our web publishing module.

Big background = big file sizes. As a designer you need to make a decision if it's worth it or not.

For some amazing examples of this approach check out CSS-Tricks. This site features a lot of leading edge web design solutions, tutorials and resources.

Method 2 | Wide Image

A wide non-repeating image whose bottom edge ends in a single solid colour. It's a great technique, note the example below where the background fades to black at the bottom edge.

clouds fading to black at bottomThe page background colour can then be matched to this using html. This means there will be no discernable join or seam where the image stops.

FYI | It's easy to do in Dreamweaver thanks to its palette colour picker tool. You just click the eye dropper on a colour anywhere on your screen and that becomes the page colour. We look at this method in more detail in the web publihsing module.

Here's another similar example but in this case the gradient is diagonal. The prinicple is the same; it still needs to end in a single solid hue.

 

The method in greater detail:
To do this in Photoshop click the foreground swatch in your tools palette ( see opposite, highlighted in red ) then choose your preferred colour. This colour is the one that will sit behind everything in the web page background.

Make a new layer. Select the Gradient Tool, ensure it's a linear gradient, click the gradient colour swatch, and ensure it's Foreground to Transparent, see screenshot below; then click - drag from above the artwork and release where you want the gradient to become solid colour.

You might have to repeat until the direction and length is perfect.

foreground to transparent gradeint palette

Method 3 | Gradients using a thin jpg | repeating across

This method uses a tall one-pixel-wide .jpg repeating across the page from left to right; good if you're after a vertical gradient effect like this.

Ensure it's tall enough so it doesn't reveal the bottom of the gradient OR ensure the colour of the web page background is adjusted to match the image's last hue if you don't you'll see the edge like this. Note how the gradient abruptly stops revealing the white page.

This method is great for buttons and panels, forms and text entry boxes. It's not just for page backgrounds.

This box has a one pixel wide, 67 pixel tall .jpg behind it, repeating in the x-direction ie: across. The jpg is < 2KB. See how it fills the entire box ? This is the best way to add depth and interest to layouts and using relatively small images. Small images = small files = faster loading pages = saving money

Method 4 | Gradients using a thin repeating jpg | repeating down

This method is similar to above but this time it repeats down the background using a wide but 1 or 2 pixel tall jpg repeating down the page like this. Download the .psd (7KB .zip) to see how it's put together.

Open it in Photoshop. You will need to use the zoom tool to see the detail. Here's the jpg on it's own, non-repeating.

It's got a middle section that is designed with just the right width to line-up with the centred content on the web page. It's also got a subtle short gradient at the red to white border to mimic a drop shadow.

 

Method 5 | Big Tiles

A repeating "tile" can be a great way to add texture to a background. The key to the success of this method is to ensure the tile, when repeated vertically and / or horizontally doesn't show where it starts and ends when it "butts-up" to the adjacent tiles. You don't want to see seams. Seams are distracting, they introduce tension and upset the layout hierarchy.

There are thousands of free-to-use downloadable tiles on the Internet or you can make your own using Photoshop. Here's a way for the "meticulous designers" among us; it uses the pen tool in Photoshop to re-create a wallpaper pattern.

Here's a box with a 100x100 repeating image background. The tile is very obviously repeating.

Here's the same box with the image at 400x400; it's less obvious however it still has a visible repetition. The trade-off is the tile is 400x400 and subsequently a bigger file. Ask yourself how would you use this as a background texture. Is there anything wrong with this texture as a background?

Amazing Backgrounds
There's tremendous flexibility when working artwork into a background. For inspirational backgrounds, check out this Smashing Magazine article.

Note:
If you want to see just the background for a web page, use Firefox and simply right-click, select "view background image" or in IE you can "save background as...". Chrome takes a bit more effort although an extension exists to make it easier.

Note: Depending on how the page is layered you may not be able to do this.

 

If you can't work out how a particular background is made, jump into our Digital Imaging Forum and ask a question there.

Once you've read about the different methods, try the Learning Task :

Learning Task: Making backgrounds for web pages (approx. 9 hrs)


1. Find three examples you like where a background image has been used on a website. Take a screenshot of each example, save the three screenshots as .jpgs 50 quality 600px wide.

Publish all three to your blog with a caption of why you like each.


2. Take a photo and change it to make it suitable as a web page background using Method 2 (where the image receds into the background colour). Save it as a jpg 50 quality 960px wide (the height is up to you). Publish to your blog with a caption to accompany your photo.

3. Make a background for a web page using Method 4 (1920px wide jpg, a few pixels tall, save as 100 quality). To test your image on a web page, download the Method4.zip folder, unzip the contents, locate and overwrite the bg.jpg file with your version then open the page in your browser. If it looks ok, take a screenshot of your browser, using Greenshot, and save as a jpg. Publish the screenshot to your blog with a caption of how you made it.

4. Make a seamless tile using Method 5. Save this as a .jpg, name it tilebg.jpg

To test your image on a web page, download this zip folder, unzip the contents, copy your tilebg.jpg over the existing one then open the method5.html page in your browser.

Take a screenshot of your browser, using Greenshot, and save as a jpg. Publish to your blog. Caption your image with what you thought about Method 5 specifically what do you need to consider if you are using a tiling background.

Submission Guidelines
Forward your blog URL via email for feedback.


If you have any questions about any of the tasks, jump into our Digital Imaging Forum and ask for help there.

Chris Adams 2017

 

Transparent PNG.

A lot of the output from a web designer is related to preparing images for the web and making images transparent is a big part of that. Using transparent images in a layout can add depth, texture and interest. Portable Netwrok Graphics (PNG) is the format

Learning Task: PNG Transparency (Approx. 2 hrs)

Download and watch the a supporting demo video called pngtrans.mp4 available on our shared Google Drive.

This task requires you to create artwork of an irregular shape and save it as 32-bit .png with transparency and deploy it onto a web page.

You'll be using the web page shown above. Your task is to replace the existing logo with your own artwork by overwriting the "mylogo.png" file.

You can grab the web page including graphics here.

You then open the web page in your browser to see how it looks. Save a screenshot of the browser if you're happy with the result.

If you need further guidance, download and watch the tutorial video pngtrans.mp4, to see how it's done in Photoshop.

Once you're happy with the result, zip your pngtest folder up again (which includes your artwork) and submit it for feedback using the Assignment Tool. Publish the screenshot to your blog. Caption it by describing the entire process.

Chris Adams 2017

 

Summary

This lesson introduced preparing images for the web usng Photoshop. After working through the Learning Tasks, you should now have a basic understaning of how to make background images that tile and repeat in both x and y axes.

You were also introduced to the PNG file format and the benefits that PNG offers specifically transparency.

These skills are central to a lot of what a web designer needs to know for publishing artwork to the web.