Working with Images in CSS3
WEBINAR: On-demand Event
Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >
Before we get into the meat of this article, we need to talk a bit about the different types of images and how they will affect your layouts. Essentially, there are a few ways of creating images for the web. One way is to use software to create vector graphics; the other method is to use bitmaps.
Vector images can be scaled with no quality loss. If you're working with fonts, buttons and line art, it's a good idea to work with a vector program, such as Adobe Illustrator or CorelDRAW. Another aspect of vector images is that file sizes tend to be small, so they load quickly.
Here's an example of a vector based image in CorelDRAW. Once you've decided on the size, you can output the layout as a bitmap. If it's too small, you can make the orginal image larger and output it again, with no loss of quality . This is the advantage of a vector based program.
The next image option is to create bitmaps (defined as pixels in a grid) which make up the image. On the low end, you can make use of PNG-8 or GIF images, which contain only 256 colors, so they load quickly. The down side is the image quality.
On the high-end, you can use images (most often photographs) which contain 16.7 million colors and look pleasing to the eye. The down side is file size. If the file is too large it will take a long time to load. This requires a compromise between the the actual dimensions of image and the file size.
One solution to the problem is to use the JPEG format and make use of compression. Be aware that if you compress an image too much, portions of the image will start to clump together and degrade the quality of the image. Some experimentation is necessary and some image manipulation programs will give you a preview window so you can see the effects of compression at different settings before you output the image. As for program recommendations, check out: Adobe Photoshop (high cost), Corel PHOTO-PAINT (part of the Corel Graphics Suite), Paint Shop Photo Pro or GIMP, which is free.
Here's an example of the preview windows in Adobe Photoshop, where you can experiment with compression. In this screen shot I'm using the JPEG format. PNG is another option but it can bloat your file sizes by 5-10x, For images, JPEG is the best overall option.
On the Fly CSS3 Controls
There are many ways to display images on your web site with CSS3. One caution, though. When resizing bitmaps, you can safely do so by approximately 20%. Any more than that and the image will begin to degrade (meaning that the image will start to appear rough). If you resize the image too much, you'll start to see the individual pixels.
Generally, when you add an image to your site, the code will look like this:
To add more control, it's a good idea to make use of width and height, like this:
<img src="buynowbutton.gif" width="418" height="252" />
As mentioned earlier, you can increase the dimensions of the image by 20% with little quality loss, but any larger and the image will start to degrade. If you need a larger size, a better idea is to make those changes in the image creation program.
Other controls you'll want to make use of concern alignment on a web page. Here are some examples:
• <div style="text-align:center">
• <div style="text-align:right">
• <div style="text-align:left">
These work for text and images. Here's an example with an image:
<div style="text-align:center"><img src="buynowbutton.gif" width="418" height="252" /></div>
To get text to wrap around images, you'll want to use the float style property. Here are two examples of that code:
• <img style="float:left" />
• <img style="float:right" />
Here's an example of that code in actual practice:
<img src="images/buynowbutton.gif" width="418" height="252" style="float:right; padding: 10px;" />
This is what the image looks like with text wrapped around it.
For more control over image placement, we'll look at vertical image alignment. Here are your options:
• <img style="vertical-align:text-top" />
• <img style="vertical-align:text-bottom" />
• <img style="vertical-align:middle" />
• <img style="vertical-align:baseline" />
Here's what the code for this looks like using all of the attributes:
<p><img src="washimage.gif" width="236" height="141" style="vertical-align:text-top;" /> This is an example of text using the text-top attribute.</p>
<p><img src="washimage.gif" width="236" height="141" style="vertical-align:text-bottom;" /> This is an example of text using the text-bottom attribute.</p>
<p><img src="washimage.gif" width="236" height="141" style="vertical-align:middle;" /> This is an example of text using the middle attribute.</p>
<p><img src="washimage.gif" width="236" height="141" style="vertical-align:baseline;" /> This is an example of text using the baseline attribute.</p>
Here's what the attributes look like on a web page with some simple text.
Another useful technique is to turn an image into a link. This is something you'll want to do if you build sales/order page and you need to use a button as the link to purchase a product. In this case, the code will look something like this:
<a href="http://yourpaymentprocessorlink.com"><img src="images/addtocart67.gif" alt="order button" border="0" /></a>
This article gives a brief idea how to use images effectively and with some on-the-fly CSS3 controls. You might want to print this article for use a quick reference down the road.