Optimizing Images for the Web-
Do you want to make your site load fast but still look good? This section will tell you how to create fast loading images for your web page.
The Most Common Mistake-
Once, I was asked to look at why a very simple web page will one small image and about 400 words of text took over 1 minute to load.
The answer was simple and is a mistake I see over and over again. The original image, which was large, was scaled to a small image size in a web site creation program, not an image editing program.
DO NOT resize your images in your website design program. The result will be a small image with the same file size.
DO resize your image in your image editing program.
When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser.
The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download.When you use an image editing program to resize the image, and you save it as a JPEG or GIF, you have actually created a smaller image. Now that postage stamp size image that you saved as a postage size JPEG will now load quickly on your visitor's computer. GIF and JPEG:
Two Image Formats You Need to Know About If you want to optimize your images the first thing you need to know about is the two image formats recognized by your web browser.
These are GIF (pronounced jif as in Jiffy Peanut Butter) and JPEG (pronounced Jay-Peg).
Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to minimize the file size.
The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations.
link to full article...
Thursday, May 10, 2007
Wondering how to title your webpage?
SEO and Your Web Site
The Title Tag
One of the first elements in a Web page is the title tag (). This is one of the, if not the, most important elements for SEO on the entire page. All too often, the information contained in this tag is either left blank, has a default value (e.g. “insert title here”), or is simply the company name.
Why is this tag so important? First of all, it is used by every major search engine as a key indicator of the page’s content, and, second, it used by the search engine as the first line in the SERPs.
Give this tag the consideration it deserves.
More links on search engine optimization..........
Website Analyzer
Net Mechanic
Website Optimization through Web Source.com
Read more here...
The Title Tag
One of the first elements in a Web page is the title tag (). This is one of the, if not the, most important elements for SEO on the entire page. All too often, the information contained in this tag is either left blank, has a default value (e.g. “insert title here”), or is simply the company name.
Why is this tag so important? First of all, it is used by every major search engine as a key indicator of the page’s content, and, second, it used by the search engine as the first line in the SERPs.
Give this tag the consideration it deserves.
More links on search engine optimization..........
Website Analyzer
Net Mechanic
Website Optimization through Web Source.com
Read more here...
Information on DOCTYPES
Here are some good links for you to read about DOCTYPES, or c/p from:
You'll need to put the code ABOVE your opening html tag.
Choosing a DOCTYPE
Browser News: Resources - DOCTYPEs
A List Apart: Articles: Fix Your Site With the Right DOCTYPE!
Doctype switch: Summary table
Mozilla's DOCTYPE sniffing - MDC
O'Reilly Network -- DOCTYPE Explained
You'll need to put the code ABOVE your opening html tag.
Choosing a DOCTYPE
Browser News: Resources - DOCTYPEs
A List Apart: Articles: Fix Your Site With the Right DOCTYPE!
Doctype switch: Summary table
Mozilla's DOCTYPE sniffing - MDC
O'Reilly Network -- DOCTYPE Explained
HTML Links
This tutorial goes over hyperlinks, linking to images, anchor links, two different kinds of mailto: links, etc.
Download this PDF tutorial
Download this PDF tutorial
Some HTML Basic Tags
This tutorial goes over headings, heading alignment, paragraphs, line breaks, invisible comments, horizontal rules, page colors, and a short reference guide.
download this tutorial in PDF format
download this tutorial in PDF format
HTML Lists
Creating Lists in HTML....this tutorial will teach you how to create several different types of lists, including: ordered; unordered; definition lists; lettered; lowercase; roman numerals
PDF Online for this tutorial
PDF Online for this tutorial
New Blog site for web tutorials and links
From now on I'll be posting tutorials for the Dreamweaver, HTML, and CSS classes, along with some extra photoshop and image stuff that I've done over the last year.
After each class the information, links, and downloads should be available on this site.
Thanks for your patience as I get this up and running...
After each class the information, links, and downloads should be available on this site.
Thanks for your patience as I get this up and running...
Subscribe to:
Posts (Atom)