Welcome to the first installment of Bootcamp. This series is aimed at covering the basics of web design. In this post I’ll be covering the basics of using graphics – Images, Photos, Pictures, Art – whatever you call them, graphics are arguably one of the most important components of modern web design.
Understanding File Formats
As you’re probably well, there is a wide array of graphic formats. You’re probably familiar with the most common formats – JPEG, GIF, PNG. Each has a specific purpose and knowing when it’s appropriate to use each one is a fundamental concept any web designer worth their salt should have more than a good grasp on.
- JPEG – Well known as the industry standard for displaying photography, anything shot with a camera. JPEG is a compressed format – and compressing your images too much can cause artifacts. I guarantee you’ve seen an image that suffers from too high compression. The result lacks clarity and detail. Be careful with this one.
- GIF – Stands for Graphics Interchange Format. This format has been around from basically the dawn of the world wide web. Most people think of Animated GIFs when they think of this format. GIFs are typically limited to a 256 or less color pallete – meaning there are only 256 (or less) colors available to make up each individual pixel. The limited color pallete means the file sizes can be relatively small and don’t rely on compression. The downside is that a photograph saved as a GIF looks terrible. GIF is typically used for Logos and basic graphics that aren’t photographic, if that makes sense. GIF also supports transparency – meaning the background can show through the image.
- PNG – Stands for Portable Network Graphics. Intended to replace GIFs, it offers sort of the best of both worlds between JPEG and GIF. The color pallete is 24 or 32-bit, and it supports transparency. This is a great choice for logos, especially those with alot of colors, that need transparency.
Using the Right Size Graphics
An important part of web design is using the right size graphics at the right time. If you’ve got a relatively new digital camera, it probably takes photos at 10 megapixels or more. These gigantic photos are way too big for most web use, and will dramatically slow down your site, because large images take longer to load. Many modern Content Management Systems, like WordPress, do a good job of automatically resizing the images for you as they are uploaded.
Using the right size graphics is a simple matter of efficiency. If you have a webpage with 20 images, lets say a photo gallery, and you use the photos directly off your camera – they might be 1MB or 1024kb each (or more). By resizing them to a good standard size for viewing online – lets say 1024×768 – you might be able to get them down to 200kb each, or a total of about 4MB. So your user downloads 80% less information, and gets basically the same experience. This can be especially important for people still using dial-up (yes they exist).
Determining the right size image to use is not a guessing game, and it’s certainly not rocket science. If you’re using Google Chrome or Mozilla Firefox as your browser – they have built in “Surveying” tools that allow you to “Inspect” existing pages, to see the sizes, and CSS selectors for existing pages.
In either browser, right click on an existing graphic and choose “Inspect Element” from the dropdown menu. It will launch an inspector pane, where you can see the size of that graphic, and any CSS selectors applied to it.
Usually your best bet is going to be figuring out how wide the element is that contains the image. Typically a div – both browsers outline the area that the panes are representing. It’s an amazing useful tool, so just play with it. Chrome even lets you modify the CSS and affect the page in real-time to see the result, so you can tweak CSS without guessing at the result.
Keeping Things in Perspective: Aspect Ratios
This should be obvious, but you would be surprised at how often this rule is violated. In Photoshop, and even in HTML and CSS you can explicitly define the height and width of an image. In photoshop, when you resize an image, you have the option to lock the aspect ratio, meaning that when you resize the image, the height and width are resized at the same rate. If you don’t lock the aspect ratio, your images get that squished effect. If you’re explicitly defining image sizes in CSS, you can explicitly define the height or width, and set the other parameter to “auto” – and your image will be sized correctly based on the image ratio built in to the image.
Optimizing Graphics for the Web (Save for Web as…)
If you’re using Photoshop to manipulate your graphics – and you probably are – learn the difference between “Save…” and “Save for web…”. Launching the “Save for Web as…” option from the file menu gives you a preview of the saved image, as well as a bunch of default settings, that will help you save an image for the web, and optimizing it’s compression and color space.
Depending on the subject of your image – you’ll want to use either JPEG, GIF or PNG – read through the options carefully, use transparency when necessary, and look at the output for christ’s sake. The window shows you exactly how big the resulting image is going to be. Start at JPEG medium. If the image looks crummy, bump it up. Look for a good size to quality ratio. There typically isn’t alot of difference between High and Medium Quality. If the Medium Quality looks ok, go with it.
Don’t: Use Text in your Graphics.
This is a faux pas every green designer makes. There is a very limited set of fonts that web browsers understand natively, so when you want to use a very specific font, you’re out of luck. If you want to use fancy fonts on your website – check out Google Fonts. I wont go into Google Fonts in this post, but it’s worth learning. It almost completely overcomes this issue.
So why not use Text in your Graphics? Computers can’t read text in graphics. Specifically, Search Engine Spiders can’t read text in graphics. Using too many graphics that contain text can really hurt you in the Search Engine Optimization Arena. The bottom line – Don’t Do it.
Learn CSS and make your backgrounds in photoshop and overlay text using Google Fonts. Your website will thank you for it.
#ProTip: Content Delivery Network (CDN)
Typically, you store your images on the same server as your webpages. This is a mixed blessing. It’s simple for you because you can take advantage of relative paths. This is a disadvantage to you because your users have to download your webpages and images from the same server. Meaning the webpage downloads, then image 1, then image 2, then image 3, then this jQuery library, then image 4, etc.
There is quite a bit of efficiency to be gained by using a Content Delivery Network (CDN) – namely the fact that your webserver is less taxed by serving up images, CSS files and other libraries needed to run your site. If you’re not getting much traffic, it may not make much of a difference – but your goal as a designer is to make the web browsing experience as smooth as possible.
In steps the Content Delivery Network. A CDN acts as sort of a secondary server that only stores your images, css files and javascript libraries. There are plenty of other files they can host, but these are the typical payload.
How do you get access to a CDN? One way is through the RackSpace Cloud. Alternatively, you can use Amazon Web Services. I don’t think you need to have a cloud server to access their CDN capabilities, but don’t quote me on that. Once you have access to the CDN, you would upload your files as usual, or use a wordpress plugin, and reference your files on the CDN. The result can be dramatic. For proof, test your site’s current load time on Pingdom Tools, then setup a CDN connection and move your images, CSS and javascript libraries to the CDN and test again. I know, right?
Ahead of the Curve: Vector Graphics
Rounding out this tutorial, we’re going to talk about Vector Graphics. Until this point, all the formats we’ve talked about are what’s know as Raster Graphics. Meaning that the image is composed of pixels, or dots. An image that is 200×200 has 200 horizontal pixels and 200 vertical pixels – resulting in 40,000 pixels that make up the image.
Vector graphics are a little bit harder to wrap your head around. They have no true resolution. They look the same at 72DPI as they do at 300DPI. Here’s Why:
Instead of thinking of vector graphics as a set of pixels, think of them as a set of mathematical instructions that determine how the image is built. Think of the language as something like “Draw a rectangle three times wider than it is tall, the draw a circle that is 5 times taller than the rectangle”. The result is an image that can be infinitely scaled up ro down with no loss of quality. Obviously there are limitations to this format. You can’t make a vector image out of a photograph. The best candidates for this format are simple logos – shapes that can be explicitly defined.
So how do vector graphics fit into the web design world? Think of them as a gold master original of a web graphic. They can be resized later, when you need a larger version of the same graphic that was originally saved for the web.
Good designers create and save their original logo designs in Adobe Illustrator, allowing them to resize them later as needed. Later when you need a larger size, you aren’t compromising resolution when you need to make a larger file. It’s a difficult concept to wrap your head around, but an invaluable one that will save you massive amounts of time in the future not having to redesign a logo just because you need a larger size.
