Intermediate Web Page Graphics

Wednesday Mar 18th 2015 by Nathan Segal

Following on the previous article (Basic HTML: Adding Images), here is more information on the main web formats, which are JPEG, GIF, PNG, and PNG-8, along with examples of each. In addition you will learn more about SEO and some basic placement of images on your web pages with CSS3.

Following on the previous article (Basic HTML: Adding Images), here is more information on the main web formats, which are JPEG, GIF, PNG, and PNG-8, along with examples of each. In addition you will learn more about SEO and some basic placement of images on your web pages with CSS3.


The acronym JPEG (Joint Photographic Experts Group) is used to describe a 24-bit file format designed for compressing photographs, photo-realistic artwork and grayscale images. JPEG is designed for use with still images only and is an excellent format for reducing the size of your images; it also stores image data as a 24-bit format. JPEG also supports 32 bit files as (CMYK) and 8 bit grayscale files.

If you want your Web sites to load quickly then effective file compression is really important. To understand a bit about how this process works, one needs to think about how big the files will be for Web pages. On the Web, you will be working at "screen resolution," which is 96-100dpi (dots per inch).

To give you an idea of how this works an 800 x 600 file is approximately 1.37MB uncompressed. Depending on the number of colors in the image, the file size could be reduced by a factor of 100:1.

JPEG is a great choice for sharing images cross-platform. On the down side, JPEG is referred to as a "lossy" format, meaning that each time the image is saved, data is discarded. If you save the image too many times the image could develop artifacts, which is where portions of the image begin to clump together. This is to be avoided if possible. Maximum quality JPEG is for all practical purposes lossless and a viable format for many high-end uses but this isn't recommended when saving files for the Web. Another down side is that it's not possible to make JPEG images transparent, unlike the GIF or PNG formats.

Another issue is aliasing, a staircase effect on the edge of images, sometimes referred to as "the jaggies." This can be evident if you use a high quality setting.

JPEG works well with full color and grayscale images, and other work such as continuous tone drawings. It's not the best choice for line drawings, images with a few colors or cartoons. In this case, GIF or PNG-8 would be a better choice.


Here's an example of the type of image you would use for JPEG compression.


The acronym GIF stands for Graphics Interchange Format and is an 8 bit format which is ideal for use with images containing few colors, (anywhere from 2-256 colors) such as cartoons, lettering and line drawings. The result is that GIF images have a small file size and they tend to load quickly. When using GIF, the temptation may be to reduce the color palette as much as possible, but going too far can cause quality issues. Another thing to be aware of is that if you have an image in the JPEG format and you want to convert it to GIF or PNG-8, be aware that there may be a color shift. GIF offers 1 bit of transparency, but this can be unpredictable and can create halos around images. If you want to make use of transparency, it's best to use it to match the color of the Web page background, if possible.


Here's an example of a GIF image which uses the full range of 256 colors.


PNG offers up to 48 bits of color and 16 bits of grayscale. Unlike JPEG, PNG is lossless, so no matter how many times you save the image, you won't lose data.

PNG also offers Gamma correction cross-platform (gamma refers to the process used by many image manipulation programs to measure image brightness and contrast). PNG is capable of adjusting these settings automatically so images display properly cross platform. It also offers an Alpha transparency of 8 bits. This allows you to create effects such as anti-aliased text, drop shadows, glows, gradient fades, etc. The 8 bits of data also allows the creation of tight masks.

On the down side, PNG files are 5-10 larger than a JPEG image and there's no support for animation.

One place where PNG is a viable option is with the PNG-8 format. This creates files that are sometimes smaller than a GIF.

Regardless of PNG quality, JPEG is still a better choice for 24 bit color images.


This PNG-8 image was created using Adobe Illustrator.


More SEO

In the previous article you were introduced to the basics of using SEO with the alt tag for an image.


Here's an example of an image. If we don't take SEO into account, the code could look like this:

<img src=" add_to_cart.png" width="389" height="173" alt="add to cart"/>

But that doesn't take into account the full power of SEO. If you want to make it easier for search engines to find your page and the code relates to a particular product, it would be better to create the following, which makes use of a more descriptive image name and to apply that to the ALT tag:

<img src=" add_to_cart_mexico_travel_guide.png" width="389" height="173" alt="add to cart mexico travel guide"/>

If you want to create SEO which will increase the likelihood of your pages being found, keyword research is the way to go. A free way of doing that is with the Google Keyword Tool.


CSS Positioning

In the previous article you learned about the basics of working with images. Here, you'll learn some basic CSS for positioning images on a web page. In the section above, you learned about some SEO basics. For the sake of this section, I'll strip those out so you can see how to use CSS with your layouts. Here's some basic code for loading an image:

<img src=" add_to_cart.png" width="389" height="173" />


Controlling Image Placement on a Web Page

In this section you'll learn about controls which govern alignment on a web page. Here are some examples:

• <div style="text-align:center">

• <div style="text-align:right">

• <div style="text-align:left">

The above settings work for both text and images. Here's an example of how this would work with an image:

<div style="text-align:center"><img src="add_to_cart.gif" width="418" height="252" /></div>


Here's what it would look like on a web page.

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="add_to_cart.gif" width="418" height="252" style="float:left; 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 looks like using all of the attributes and an image:

<h2><img src="add_to_cart.png" width="389" height="173" style="vertical-align:text-top;" /> This is an example of text using the text-top attribute.</ h2>

<br />

<h2>< img src="add_to_cart.png" width="389" height="173" style="vertical-align:text-bottom;" /> This is an example of text using the text-bottom attribute.</ h2>

<br />

<h2><img src="add_to_cart.png" width="389" height="173" style="vertical-align:middle;" /> This is an example of text using the middle attribute.</ h2>

<br />

<h2><img src="add_to_cart.png" width="389" height="173" style="vertical-align:baseline;" /> This is an example of text using the baseline attribute.</ h2>


Here's what the attributes look like on a web page with some simple text.



As you can see, there are many Web formats you can use along with different image sizes. You also learned about basic SEO and how to style images and text using CSS3.



Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved