Times change, and so do standards. What used to be the standard of internet web graphics now has to be replaced with a new file type. “PNGs uses the deflate compression algorithm typically with a 32KB sliding window. Deflate is an improved version of the Lempel-Ziv compression algorithm (LZ77) used in ZIP and GZIP files (3,4). Created by Phil Katz for version 2 of PKZip, deflate combines LZ77 with Huffman encoding and is 10% to 30% more efficient than LZW at lossless compression. Like gzip, some PNG compression tools have an optional “compression ratio” with values ranging from one to nine. Six is the default. Nine is almost always the best setting for maximum compression ratio.Not surprisingly, images saved as PNGs are typically 10% to 30% smaller than GIFs, although in rare cases they can be larger (5,6). In our tests, we found some images can compress 40% to 50% smaller or more (over 85% in one example) depending on the image. Typically images with large flat areas of color compress better than smooth-toned images with many color transition areas.

PNG Features

PNG has a number of features that make it appealing to the medical and graphics industries. Fireworks uses the PNG format to save its internal files, and PNG’s 16 bit grayscale capability makes it useful for accurate radiological imagery. PNG prefilters the image data using predictor functions, one of which is “Up” which looks for similarities in vertical patterns for full-color PNGs. Indexed color PNGs (8 bits or less) usually do not benefit from filtering, so use “none” when there is a choice. For true-color or grayscale images, use Adaptive.

“The place PNG is most commonly used for 24-bit RGB (even final versions) is rendered images such as ray-traced scenes (with minimal use of textures) or mathematical objects; they have artificially smooth color transitions that work well with PNG’s filters. Some fractals may be amenable to the same treatment, but many of the best ones have very noisy sections that compress quite poorly.” - Greg Roelofs (7)

For web use, the PNG8 (8-bit) is the form of PNGs that designers use to replace GIFs. PNGs can have an alpha value for each color in the palette, which effectively means the palette is RGBA, not RGB-with-one-exception like GIF. This lets you trade off color fidelity for transparency and still retain the size advantage of an 8-bit image versus a 32-bit one. PNGs can also work with one level of transparency, just like a GIF89a. The PNG compression algorithm looks for repeated horizontal patterns like GIF’s LZW compression scheme. Interlaced PNGs can also be recognized after about only 25% of the file has downloaded, as opposed to GIFs which require about 50% of the file to be downloaded before recognition (8). Although there are some rare exceptions, replacing your GIFs with PNGs will significantly reduce the size of your images.”

Read the full article through Website Optimization.com

Jeffery Zeldman has long been considered the King of Web Standards. In this article for A List Apart back in 2001 he talked a little bit about SMIL and what it would mean for web standards and accessibility.

"SMIL stands for “Synchronized Multimedia Integration Language,” and is pronounced “Smile.” Isn’t that cute? Oh, shut up.

SMIL is an easy-to-learn, HTML-like language for creating “TV-like multimedia presentations such as training courses on the web,” according to the W3C. The current SMIL recommendation is 1.0, and you can read all about it at the W3C address cited immediately above, and at another one we’ll mention later. This is our way of avoiding adding fifty pages to this article.

Aside from the fact that Internet heavies like Real, Apple, Adobe, and Macromedia are throwing their weight behind SMIL, why should you care about any of this? Let’s see.

Harnessing media, helping users

SMIL packs accessibility features including alternative text content that can be made available to Braille readers. Such content will also enable search engines to index multimedia web content authored in SMIL.In English: Slap a Quicktime video on your site, and search engines like Google or Altavista couldn’t care less. But add a carefully authored SMIL presentation to your site, and speeches made by the characters in your video could show up in Google and Altavista’s search results."

Read the full article by Jeffery Zeldman to learn more about his ideas on the future of web accessibility.

Questions about font use in images? You’re in luck. Joe Gillespie is has quite a lot to say: “If you’ve ever tried setting text in Flash at small sizes, you will probably have been very disappointed. Flash’s over enthusiastic anti-aliasing makes small type look like an out of focus photograph. The problem comes from using fonts that were designed for printing and not specifically optimised for screen display. Printer fonts are intended to work with high resolution output devices not on low resolution computer screens.On the other hand, fonts that are designed for optimal screen display are going to look chunky and pixelated if they are printed. They are two different media and although you can compromise, the best fonts for screen display at small sizes are crafted pixel by pixel by experienced designers. That’s why they are called ‘pixel fonts’.

Before I start discussing pixel fonts and providing some tips for their use, it helps to first have a look at computer type in general to put things into perspective.

At one time, all computer fonts were pixel fonts. Well, everything you see on a computers screen is made up from pixels but, at that time, printing was performed by dot matrix printers and the printed output was a dot for dot copy of the screen image.”

Read the full full four paged article the Best Flash Animation Site V2.2.

Bill Bither likes the PNG format for graphics. In the start of his article, he lays out some of the nifty features that separate it from GIF and TIFF file formats. But there’s more.

“However, perhaps the best thing a PNG has to offer is what’s called the alpha channel. An alpha channel is one byte of extra data per pixel (or palette entry for 8-bit images) that represents the transparency level of a pixel. A PNG image with alpha is capable of 256 levels of transparency. What does all this mean? For one thing, you can antialias text and images so that sharp curves look good against any background. You can apply a true drop shadow which fades into the background. You can create images that take any shape or form. There are many possibilities with alpha transparency.
Browser Support

The unfortunate thing with alpha in PNG’s is that browser support is way behind the times, although slowly catching up. Although both Netscape 4.04+ and Internet Explorer 4.0+ both read PNG images, the windows version of MSIE 5.0 can only read one level of transparency in 8-bit PNG’s (the Mac version of MSIE5.0 works perfectly!). At least this allows for direct conversion of GIF’s to PNG’s. The good news is that the new Mozilla browser (the browser behind Netscape 6.0) fully supports PNG alpha. Microsoft should catch up very soon!”

See the examples and read the full article at Atalasoft’s web page.

Steve Holzner, another big name in the computing world has written a very informative article that covers many different ways to use XML. This is only one of them:

“XML at Work: Synchronized Multimedia Integration Language

Synchronized Multimedia Integration Language (SMIL, pronounced “smile”) has been around for quite some time. It’s a W3C standard that you can find more about at http://www.w3.org/AudioVideo/#SMIL.
SMIL attempts to fix a problem with modern “multimedia” browsers. Usually, such browsers can handle only one aspect of multimedia at a time—video, audio, or images—and never more than that. SMIL lets you create television-like fast cuts and true multimedia presentations by letting you specify when various multimedia files are played.

The idea is that SMIL lets you specify what multimedia files are played when; SMIL itself does not describe or encapsulate any multimedia itself.

Microsoft, Macromedia, and Compaq have a semicompeting specification, HTML+TIME, which I’ll take a look at next. Microsoft hasn’t implemented much SMIL in Internet Explorer yet because of this reason. You can find a SMIL applet written in Java at http://www.empirenet.com/~joseram, as well as some stunning examples of symphonies coordinated with images. ”

See an example and read the full article at Peachpit.

To answer our questions about image types for your web page, Jeff Atwood is there. “When it comes to image formats on the internet, it’s generally a three-way tie between JPEG, GIF, and PNG. Deciding which image format to use is relatively straightforward; you choose lossy JPEG when you’re saving continuous-tone photographic images, and you choose between lossless GIF or lossless PNG when you’re saving images with large blocks of the same or similar colors. See my comparison of GIF/PNG and JPEG if you’re not clear on what the difference is. But the choice between GIF and PNG is no contest. PNG is a more modern and vastly improved version of GIF that (almost) completely obsoletes it. You should always choose PNG over GIF, except in the following two circumstances:

1. You want an animated graphic. PNG doesn’t support animation. GIF does.
2. Your image is extremely small, on the order of a few hundred bytes. In my experience, GIF filesizes are smaller in this scenario.

In every other way, PNG is the natural heir to GIF. It’s copyright-free, it can store all bit depths, it can represent alpha channels, and it offers more efficient compression. But as great as PNG is, there are a few things you should know about PNG to get the most out of it.

Let’s start with a representative image. I took a quick screenshot of this website, along with all the browser chrome, transparency, and shadows. ClearType font rendering is on, and there’s a nice mix of text, graphics, and UI. It’s a perfect candidate for the lossless PNG file format, because there are large areas of the same colors and hard transitions between them. We want nice, crisp transitions between the white and dark areas of the screenshot.”

See the examples and read the full article at Coding Horror. Includes tips on interlacing, and optimization of your PNG.

Everyone would love to be able to go to a web page, slip on their wired gloves, and literally feel the product they are considering purchasing. Unfortunately, as Mike Hurwicz writes about, it’s not so simple.

“More websites would use VR if it weren’t for technical impediments. VR is most convincing and pleasing when it uses realistic textures, lighting and sounds. Using those elements makes files large, and large files mean slow performance — which could account for Web surfers spending more time in 3D areas on e-commerce sites. The upscale Web surfers who go to The Sharper Image site are likely to have fast computers with graphics acceleration that display demanding textures and lightning at a reasonable speed. For much of the rest of the world, realistic VR on the Web may just be too slow to be fun. In particular, graphics processing may be insufficient to present smooth motion with realistic shading and textures.

On the other hand, the limitations of computers and the demands of VR should not be exaggerated. VR files are not necessarily huge. They can be small if they consist mostly of vector graphics. A bit of code that says “draw box, size 10×10x10, color red” takes up a lot less space than even a compressed bitmap of the same box.

“It’s been a misconception in the media since day one that VR files are huge,” says Dan Ancona, founder of Vizbang.com, which is developing “Spark”, a VR-based presentation tool. “File size is increasingly irrelevant, especially with the mushrooming availability of higher than 56K bandwidth.”

In addition, many computers shipping today come with built-in 3D graphics acceleration.

But there are areas where limitations remain. Even the best standard monitors aren’t big enough and don’t have the resolution to give complete, detailed, life-size images of many objects, not to mention whole scenes. Color reproduction is usually inconsistent and audio is seldom hi-fidelity. These problems apply to all 2D and 3D graphics on standard desktop machines, not just the Web. And they apply no matter what the underlying VR technology.

Add to that the bandwidth limitations and possibly unreliable connections of the Web, and you have the potential for a deeply dissatisfying experience.”

He suggests that XML might possibly make this movement simpler. You can read the full details in the full article from Web Developer’s Journal.

Visitors to your web site would like to have some sense of space in it. A good way to do this very thing is to use tab displays. Justin Cook tells us just how to do that in his article. “Step 1 – Create the Rounded Rectangles

So now we have an empty workspace. Grab the rounded rectangle tool. If you don’t see it, click and hold the rectangle tool, and it will appear as an option to switch to.

Draw a big (preferrably white) rounded rectangle, the full width of the image. It doesn’t matter too much the height of it, as you’ll be tiling the center portion to stretch to whatever length the page needs. Just leave a little space at the top for the two different tabs. Duplicate this layer into another, and hide that layer. (This step is important, and we’ll come back to it later.)

On the same layer, draw a small rounded rectangle that runs into the top of the big one. This is the first tab, the ‘on’ or active tab. Group these two rectangles with ‘Ctrl + g’.

Now create another layer, behind the first, and draw one more rounded rectangle. This one should be approximately the same size as the first, but a few pixels higher. Do not group this one.

You should now have something that looks like the following:”

Read the full article and see the examples at Devarticles.

Roberto Scano offers a detailed and informative history of website accessibility: “The first web revolution happened on the 14th January 1997: HTML 3.2 was issued from a consortium called the W3C, a consortium not yet known to web developers. As written in the document’s introduction, HTML 3.2 is the W3C’s specification for HTML, developed in early 1996, together with vendors including IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, and Sun Microsystems. HTML 3.2 added widely deployed features such as tables, applets and text flow around images, while providing full backwards compatibility with the existing standard HTML 2.0. Ten years later, and this is all history, but in those early years were the first web developers: guys and students (especially inside universities, where the web was available before it was available to the general public) started to develop their first pages using built-in web browser editors. I remember the first version of popular browsers : NCSA Mosaic, then Netscape, then Internet Explorer, and I also remember how difficult it was to configure Winsock.

CSS 1.0 was also on the scene in 1997, but presentation was achieved with markup elements and attributes back in those days. Browsers were not as forgiving as they are today. Mosaic stopped rendering content on the first markup error. When HTML 3.2 was first introduced, the HTML Writers Guild (there has been an HTML Writers Guild since 1994), merged with IWA , and only had their plain text editors for creating and editing content when the first shareware / freeware application for developing HTML was issued.”

Please read the full article from Juicy Studio and be informed of the rich history behind this important movement in web standards.

Cascading Style Sheet is a web tool that can be utterly necessary if you want to give a professional, qualitative look to your site. It is recommended by W3C , who manages the standards for the Internet, in order to add style (e.g. fonts, colors, spacing, padding, alignment, etc.) to web documents.

The style sheet is more and more used presently due to its usefulness and its advantages that are far from minor: it mainly allows to dissociate the content and the presentation of web pages, which makes them compatible for various browsers, and also accessible to people with disabilities (who must use accessibility readers), to PDAs or to WAP.

Benefits of Using CSS for SEO

Among the most common examples of CSS usage there are the modification of the colors of hovered links, text placement, establishing the spacing between words, and the modification of border size and style. The style sheets can be inserted directly into the HTML code of each page, but they can also be written on a different page, in an external file (.css).

This second solution is by far the best one, primarily because it holds undeniable advantages such as:

• The HTML code on each page is much cleaner
• The CSS file is cached from the very beginning, and this speeds up the load time for the next pages
• The update process can be performed much faster: it suffices to modify a single file to change the entire site, no matter the number of its pages.

It is quite easy to see the close connection between search engine optimization and CSS. Style sheets will help you decrease the file size of your web pages, and will give you the opportunity to use more text and links than regular HTML, without being constantly afraid of spamming the search engines.”

Read more for all of the tips and perks of using CSS to your advantage in Search Engine Optimization.