Meta tags:
description=Hints and tips on what Web developers should do when adding graphics to a Web page.;
keywords=Web, images, graphics, ALT text, alternate text, ALT attribute, IMG tag, WIDTH, HEIGHT, HTML, GIF, JPEG, PNG;

Headings (most frequently used words):

and, the, width, height, of, graphics, on, way, dan, web, tips, images, graphic, formats, alt, text, align, attribute, getting, rid, annoying, blue, lines, don, link, to, your, local, hard, disk, imagemaps, why, do, my, look, so, sucky, aol, hall, shame, links, some, bad, examples, but, maybe, you, shouldn, use, wrong, right, references, tutorials, picture, sources, misc,

Text of the page (most frequently used words):
the (267), text (81), and (75), you (69), that (58), for (55), alt (52), with (47), #graphic (47), your (36), this (35), web (32), graphics (31), image (31), use (30), but (30), browsers (27), some (27), site (26), they (24), used (24), images (23), page (22), not (21), browser (21), are (20), all (19), can (19), line (19), even (17), don (17), format (17), have (16), may (16), users (16), like (15), which (15), link (15), will (15), gif (15), there (15), graphical (14), height (14), width (14), when (14), using (13), netscape (13), see (13), was (12), has (12), type (12), align (12), them (11), attributes (11), such (11), get (11), make (11), other (11), aol (11), out (11), art (10), links (10), right (10), user (10), size (10), picture (9), many (9), than (9), want (9), from (8), these (8), its (8), img (8), until (8), could (8), one (8), here (8), compression (8), off (8), mime (8), first (7), server (7), stock (7), putting (7), doesn (7), only (7), imagemaps (7), really (7), rather (7), better (7), look (7), work (7), place (7), mode (7), time (7), people (7), dan (6), why (6), another (6), clip (6), tag (6), content (6), few (6), been (6), before (6), were (6), now (6), should (6), sites (6), since (6), show (6), what (6), way (6), space (6), support (6), more (6), supported (6), software (6), full (6), much (6), something (6), hard (6), because (6), html (6), document (6), well (6), just (6), left (6), attribute (6), top (6), same (6), would (6), without (6), png (6), search (5), large (5), empty (5), isn (5), including (5), internet (5), imagemap (5), still (5), specific (5), most (5), stuff (5), about (5), put (5), non (5), jpeg (5), version (5), button (5), below (5), turned (5), versions (5), while (5), let (5), src (5), cases (5), clear (5), bottom (5), their (5), actually (5), tip (5), anyway (5), purpose (5), tips (5), fit (5), save (5), useful (5), files (5), gifs (5), created (4), next (4), unfortunately (4), free (4), photoshop (4), usually (4), various (4), navigation (4), instead (4), silly (4), buttons (4), linked (4), also (4), into (4), sometimes (4), things (4), load (4), around (4), lynx (4), loading (4), side (4), where (4), pages (4), plain (4), disk (4), probably (4), made (4), gfx (4), ugly (4), small (4), middle (4), over (4), hold (4), shouldn (4), earlier (4), feature (4), file (4), best (4), then (4), program (4), larger (4), unisys (4), patent (4), com (3), almost (3), somebody (3), photos (3), yet (3), resources (3), domain (3), tutorials (3), alternative (3), style (3), very (3), add (3), bullets (3), horizontal (3), rules (3), whole (3), issue (3), loaded (3), important (3), name (3), those (3), hall (3), missing (3), lots (3), sort (3), creator (3), who (3), great (3), simply (3), features (3), cause (3), take (3), list (3), note (3), example (3), provide (3), else (3), msie (3), data (3), might (3), always (3), already (3), know (3), won (3), good (3), different (3), sure (3), nongraphical (3), appropriate (3), tool (3), fine (3), colors (3), normal (3), new (3), editor (3), system (3), generally (3), click (3), insert (3), embedded (3), icons (3), didn (3), blue (3), extra (3), rid (3), brackets (3), color (3), border (3), whether (3), looks (3), start (3), ignore (3), engines (3), indexing (3), though (3), thing (3), explorer (3), greatly (3), code (3), omit (3), intended (3), mozilla (3), header (3), instance (3), logo (3), existence (3), big (3), later (3), think (3), making (3), sized (3), resized (3), smaller (3), net (3), tiff (3), standard (3), formats (3), however (3), 1997 (2), 2018 (2), previous (2), replace (2), photo (2), source (2), pictures (2), design (2), htmlhelp (2), interesting (2), risks (2), read (2), little (2), decoration (2), digest (2), means (2), table (2), loads (2), reading (2), spacers (2), logical (2), fame (2), nothing (2), huge (2), bad (2), shame (2), any (2), personal (2), attack (2), find (2), improve (2), removed (2), looking (2), publishing (2), own (2), servers (2), part (2), change (2), latest (2), quality (2), compressed (2), lossy (2), manner (2), map (2), general (2), row (2), parts (2), each (2), works (2), altogether (2), once (2), achieve (2), old (2), status (2), cue (2), client (2), url (2), handle (2), end (2), create (2), both (2), wysiwyg (2), somewhere (2), computer (2), broken (2), local (2), href (2), 120 (2), 200 (2), pretty (2), following (2), breaks (2), avoid (2), within (2), itself (2), lines (2), common (2), suppress (2), try (2), getting (2), words (2), aligned (2), filling (2), reached (2), true (2), vertical (2), centering (2), produce (2), center (2), presence (2), main (2), trying (2), keywords (2), mouse (2), specifically (2), bugs (2), particular (2), sensible (2), after (2), sound (2), prior (2), imply (2), original (2), substitute (2), under (2), choose (2), above (2), surround (2), product (2), says (2), solid (2), mahogany (2), chicken (2), coop (2), square (2), consider (2), double (2), vision (2), replaced (2), bullet (2), organization (2), inline (2), formatting (2), saving (2), microsoft (2), inferior (2), ignores (2), layouts (2), maybe (2), especially (2), quickly (2), enough (2), omitted (2), had (2), resize (2), resolution (2), etc (2), proper (2), wide (2), actual (2), lzw (2), legal (2), years (2), ago (2), popularity (2), windows (2), sent (2), bmp (2), developers (2), long (2), routine (2), extension (2), popular (2), suing (2), sued (2), soft (2), syntax (2), medium (2), creation (2), simple (2), documents (2), everything (2), webmaster, webtips, info, jul, last, modified, sep, copyright, daniel, tobias, rights, reserved, useit, steals, inlining, misc, canva, seller, graph, sells, foto, photography, paid, predecessor, barry, clipart, burst, shopify, public, sources, beginner, guide, basics, levels, titles, webreference, artwork, discussion, references, discussions, technological, regularly, maintainer, decided, issues, neglected, prevented, scrolling, past, contents, happen, fairly, archives, uses, mere, decorative, sinead, quinn, belongs, subdomain, stupid, unnecessary, worthy, apple, online, store, canadian, registration, authority, whatsoever, absolutely, quite, alts, gould, academy, home, inclusion, construed, person, information, entertainment, highlight, intentional, accidental, problems, avoided, offended, down, subsequent, redesigns, complaining, visible, nobody, widely, sends, through, sending, presently, adapted, likely, eventually, owns, pass, unchanged, does, caching, press, reload, proprietary, mess, particularly, jpegs, configuration, setting, disable, developer, ensure, munged, sucky, clickable, country, hometown, geographical, regions, alphabetical, states, cities, going, separate, separately, provides, navigational, lower, bandwidth, eschewing, less, play, background, font, course, stylesheets, become, fancy, visual, effects, thinking, purposes, ask, give, useless, goes, clicking, absent, newer, having, kinds, everybody, dump, edit, ascii, certain, hand, laugh, illogical, access, done, editors, point, supposedly, automagically, converted, address, upload, leave, step, checks, available, error, catch, appear, goof, www, mypic, wrong, immediately, closing, although, normally, ignored, positions, underlined, safest, break, angle, processed, whitespace, two, ways, unsightly, whatever, shows, default, adding, purists, complain, makes, interfaces, inconsistent, removing, indicates, visited, annoying, piece, soon, afterward, wrap, depending, nonstandard, chose, implement, fix, implementation, correct, absmiddle, least, supposed, wordwraps, begins, gives, bit, control, positioning, respect, adjacent, assistance, regaining, honest, degree, lose, abuse, artificially, belong, lists, every, whenever, shown, increases, length, takes, excessive, repetition, trigger, anti, spamdexing, penalties, plus, completely, idiotic, spamdex, instances, rule, markup, expresses, meaning, platform, independent, solely, aren, shortchanging, tweak, carefully, enhancements, basic, structure, lead, pop, toolbar, supplemental, replacement, awkward, results, constant, pressure, newsgroups, forums, cave, compatibility, bugzilla, too, fitting, glory, mentioned, mis, serves, title, render, 400, 100, megacorp, inc, giving, redundant, followed, item, phrase, twice, audio, echo, indicating, redundantly, set, care, illustration, bring, external, viewer, serve, valuable, function, alerting, pick, flows, items, loud, everywhere, appears, how, ridiculous, giant, capital, letter, beginning, sentence, insist, purely, decorations, otherwise, rows, texts, run, together, glitziness, society, red, knowing, menu, picking, current, rendered, mailing, importing, working, designed, extracts, poorly, formatted, between, doing, job, readers, blind, slow, connections, displayed, conjunction, helps, waiting, come, fondest, wish, brilliant, returning, lets, careful, thought, flow, reason, designers, explanation, truncated, misses, problem, form, needing, bigger, worth, thousand, author, becomes, matter, opinion, favor, leaving, case, direction, boy, thumbnail, examples, straight, digital, camera, higher, level, paint, shop, pro, reduce, applies, scanner, unless, scan, begin, suggested, jacobson, pixels, stretched, fill, producing, effect, artist, creating, technique, wasting, download, excessively, seen, 1024, pixel, 500, kilobyte, properly, reduced, kilobytes, amounts, transfer, older, correctly, please, resist, urge, desired, layout, reasons, lay, entire, succeeds, wait, knows, anything, modem, connection, faced, blank, screen, friendly, away, fancier, intolerable, equal, force, risk, regard, commonly, declined, seems, vanished, pcx, bitmap, wallpapers, supports, official, mostly, types, defiance, definition, headers, determine, being, idea, wasteful, thus, ticked, claiming, protection, touted, totally, improved, technology, lagged, considerably, behind, administrators, bother, configure, send, safe, officially, registered, necessary, photographic, millions, blur, details, dos, found, abbreviated, jpe, jpg, terms, early, days, generated, limited, 256, raised, stink, companies, realizing, algorithm, patented, despite, serious, questions, enforceability, patents, managed, bully, paying, royalties, others, seem, anybody, statements, implied, affected, couldn, creates, reads, contradicted, themselves, hinted, increasing, litigiousness, produced, unlicensed, dubious, court, indeed, prove, fortunately, question, expired, june, 2003, longer, nowadays, static, often, renewed, animated, aside, pronounce, pronunciation, jif, live, shreveport, politician, whose, pronounces, article, slashdot, compuserve, currently, elsewhere, myhouse, house, designer, crowd, imagine, ever, existed, developed, addition, innovations, novel, interface, universal, addressing, hypertext, language, allowing, protocol, transmit, http, came, believe, along, follow, pointers, ads, necessarily, endorsed, google, w3c, validator, drink, thirst, clich, statement,

Text of the page (random words):
p all of these things came about prior to the existence of graphical browsers believe it or not one can actually create an interesting useful web site with few or no graphics look at this one for instance but most of you will want to add some pictures along with your text and that s fine just follow a few pointers to make your site work best for both the graphical and non graphical browsers out there syntax of img tag img src gfx myhouse gif width 96 height 64 alt picture of my house graphic formats some currently popular formats of graphics in the web and elsewhere are gif for a long time the most popular web graphic format supported by all graphical browsers gifs were usually best in terms of smaller file size in the early days of the web for line art and computer generated graphics but are limited to 256 colors the compression routine used in gif is lzw which unisys had a patent on and they raised a big stink in the net a few years ago by suing various companies that created software using this format especially compuserve which created the format in the first place not realizing the algorithm was patented despite serious legal questions about the enforceability of such software patents they managed to bully various people into paying them royalties but many others still don t and for a while unisys didn t seem to be suing anybody else also their own statements implied that only software developers are affected and you couldn t get sued for using gifs in a web site only for publishing software that creates or reads the format however they later contradicted themselves and hinted at increasing litigiousness see an article in slashdot now they imply that you could get sued for using gifs on your web site that were produced using an unlicensed graphic program it s dubious whether this would hold up in court or indeed if they could even prove what program you used to make your gifs anyway fortunately the patent in question expired on june 20 2003 so this is now no longer an issue nowadays static graphics are often in png instead but gif has renewed popularity as an animated graphic format mime type image gif aside while some people pronounce gif with a hard g the original intended pronunciation has a soft g like jif however where i used to live shreveport la there s a local politician whose first name is gif and he pronounces it with a hard g jpeg supported by almost all graphical browsers this format has the best compression for many photographic images and is in true color millions of colors mode it s a lossy compression routine that may blur details in the picture usually the file extension is jpg to work under dos and windows 3 1 though the full jpeg extension is sometimes found as is jpe another abbreviated version mime type image jpeg png created by some developers who were ticked off at unisys for claiming patent protection on the compression used in the gif format it was touted as a totally free and improved technology graphic format to replace gif support of this format in browsers lagged considerably behind the other formats for a long time and many server administrators didn t bother to configure their servers to send the proper mime type for png files so that the browsers that do support it will do the right thing with them however by now it s safe to use png graphics on the web mime type image png sometimes image x png was used but this format is officially registered so the x isn t necessary bmp the standard windows and os 2 bitmap format used for wallpapers etc it s not generally used on the web but microsoft internet explorer supports it netscape 4 x or earlier doesn t i don t think there s even an official mime type for it but that s ok with msie since it mostly ignores mime types anyway in defiance of the standard that says that these type definition headers sent by the server should be used to determine what type of data is being sent anyway it s not a good idea to use bmp files even if they were supported by more browsers they re a wasteful format since they re not compressed and are thus much larger than the same graphic as a gif or jpeg pcx commonly used for clip art files many years ago but it declined in popularity and seems to have vanished altogether i don t think any browsers support it and there isn t even a standard mime type for it tiff another common clip art file type but not used on the web very much some tiff files use lzw compression putting them at the same legal risk as gifs with regard to the unisys patent mime type image tiff width and height tip always use width and height attributes with images and they should equal the actual size of the image rather than be used to force the browser to resize it the width and height attributes let the browser lay out the entire page before it succeeds in loading all of the graphics without them it has to wait until the graphic is loaded before it knows where to put anything below or to the right of the graphic over a modem connection it could take a while to load all the graphics and the user may be faced with a blank screen until then it s much more friendly to let the user start reading the page earlier and it may even let you get away with putting more larger fancier looking graphics without making the page intolerable while many browsers will re size a graphic if you use width and height attributes different from the actual size of the graphic please resist the urge to use this to make your graphics fit a desired layout why here s some reasons some older browsers may ignore these attributes and not size the graphic correctly if you use this technique to make the graphic smaller than it really is you re wasting the users time by making them download an excessively large graphic you should have resized it first in your art program before putting it up on the net i ve actually seen 1024 pixel wide 500 kilobyte graphic files resized by width and height attributes to be small icons on people s web pages properly reduced these images could have been made to be more like 10 kilobytes saving great amounts of data transfer time and disk space if you use this to make the graphic larger than it really is it will probably look really ugly the pixels will be stretched out to fill the larger space producing an effect greatly inferior to what an artist could achieve by creating the graphic in the proper size to start with tip don t use an image straight out of your digital camera those images are generally at a much higher resolution level than is useful for the web you should use an image editor program e g photoshop paint shop pro etc to reduce it to a smaller size the same usually applies to images from a scanner unless you used a scan resolution that is web sized to begin with suggested by dan jacobson some bad examples example 1 your browser had to load a large full sized graphic then resize it to the thumbnail above example 2 a small button was resized to be large and boy it looks ugly but maybe you shouldn t use width and height there s one reason why some web designers sometimes choose not to use width and height in some browsers netscape in particular if the size of the graphic isn t large enough to fit the alt text see explanation of the alt attribute below then it will be omitted or truncated when graphics loading is turned off and the user misses out on some of the content if width and height is omitted the missing graphic is sized to fit the alt text in most cases this isn t a problem since a graphic with lots of text in it is probably big enough to hold the same text in its alt form but there may be a few cases of graphics needing alternative text bigger than the graphic itself a picture is worth a thousand words after all so that s something for the author to consider it then becomes a matter of opinion whether to use or omit the size attributes i still favor leaving them in but a case can be made in the other direction alt text tip use alt text with all of your images and put careful thought into making this text flow well for nongraphical browser users alt text is intended to substitute for the graphic for users with text only browsers such as lynx or text readers used by blind people or with graphics turned off as some users with slow connections do and it s also displayed by some browsers until the graphic loads so in conjunction with width and height it helps the user find something useful on the page without waiting for the graphics to come up you may think that the fondest wish of all users is to see your brilliant graphical layouts but maybe especially when returning to a site they ve already been to they re simply trying to get quickly to some part of the site and the presence of alt text lets them see quickly which button to click on note you may actually have a text browser without even knowing it in many browser versions e g netscape and mozilla try the save as feature in the file menu picking plain text as the format to save this will save the current page as plain text which is rendered in much the same manner as a text browser would with images replaced with their alt text this can be a very useful feature if you want to save the text content of a web document for later use such as e mailing to somebody or importing as plain text into another document you re working on without all the graphics and formatting but it works best when the web page you re saving was designed to work well on text browsers including sensible use of alt text microsoft internet explorer has a greatly inferior save as text feature which ignores alt text and just extracts the normal text of the document poorly formatted mozilla and netscape 6 0 and up are somewhere in between using the alt text but not doing as good a job at formatting the page in text mode as earlier netscape browsers pick alt text that flows well when the graphic is replaced by the text some people do silly things like alt big red bullet for graphical bullets used before items in a list if you read the page out loud using this everywhere a bullet appears you ll see how ridiculous it is instead use alt for bullets alt for horizontal rules alt w for a giant capital letter w at the beginning of a sentence if you insist on using a graphic for this sort of thing alt the graphical glitziness society for a logo with an organization name at the top of a web page if you just do something like alt logo a text mode user won t even know what organization it is use an empty alt like alt for graphics that are purely decorations or empty spacers to suppress an embedded inline that a text only browser like lynx will show otherwise for buttons and icons in rows you may want to surround the alt texts with square brackets so they don t run together tip avoid giving your text mode users double double vision vision by using redundant alt text for instance if you have a product page with a text header at the top that says solid mahogany chicken coop followed by a picture of the item you probably shouldn t use alt solid mahogany chicken coop as the picture s alt text since that would make a text browser show that phrase twice in a row and make an audio browser sound like it has an echo it would be better to use something like alt picture of product indicating the purpose of the image non redundantly in square brackets to set it off from the other text of the page or if you consider the image just a decoration that text mode users won t really care about the existence of you could use an empty alt but don t do this if the image is an important illustration that users might want to bring up another browser or external image viewer to see in such cases the alt text can serve a valuable function in alerting the user to its existence and purpose if a graphic at the top of a page serves as the main title header of the page surround it with a h1 tag so that non graphical browsers will render the alt text in the style appropriate to such a header for instance h1 align center img src gfx logo gif width 400 height 100 alt megacorp inc h1 don t let the above mentioned mis feature of netscape 4 x and earlier that alt text doesn t show in graphics too small for it to fit cause you to choose to omit alt text in such cases because it doesn t fit anyway users of many other browsers will see your non fitting alt text in its full glory most versions of netscape prior to 6 0 as well as msie show the alt text when you hold your mouse over a graphic so even they can see it now but that shouldn t lead you to code alt text specifically for the purpose of pop up toolbar text which would imply that you should make it supplemental to the graphic rather than a replacement for it this would produce awkward results when the alt text is used in its original intended purpose as a substitute for the graphic in nongraphical browsers or when graphic loading is turned off mozilla doesn t show alt text as tool tips though they re under constant pressure in newsgroups web forums and bugzilla to cave in and do it for compatibility with other browsers these are specific instances of a general rule that you shouldn t code your web site specifically to the features or bugs of a particular browser but rather use sensible markup that expresses the meaning of your document in a platform independent way if you add or omit things solely because they are or aren t supported on some specific version of some specific browser you may be shortchanging users of other browsers including the next version of the same browser from getting the full content of your site after you have sound logical html code in place you can tweak it carefully to work around browser bugs and support browser specific enhancements but get the basic structure in place first yet another thing not to do with image alt text is to use it to spamdex the search engines by putting huge lists of keywords in every image this looks completely idiotic whenever the alt text is shown in a browser like in a text browser a graphical browser with images turned off or in the latest versions of netscape and internet explorer as a tool tip when you hold the mouse over an image it greatly increases the size of the page and the length of time it takes to load and it may not even work to improve your search indexing such excessive repetition may well trigger the anti spamdexing penalties plus there are some search engines that ignore alt text anyway some search engines do look at alt text when indexing though so the presence of alt text can be of assistance in regaining the honest degree of indexing your site may lose by using graphics instead of text for parts of its main content just don t abuse this by trying to artificially stuff keywords where they don t belong the align attribute the align attribute gives you a little bit of control over positioning of a graphic with respect to adjacent text here i used align top to line the top of the image up with the top of the text line note that once th...