- Always use PNG, or JPG (= JPEG), or GIF
- Never use BMP, PCX, TIFF, etc...
- Always use CSIM
- Never use SSIM
- Lossless data compression - PNG
- TIFF usually uses lossless compression (LZW = Lempel-Ziv-Welch - compression ), or no compression.
- Some image file formats, like PNG or GIF, use only lossless compression, while others like TIFF and MNG may use either lossless or lossy methods.
- JPG (= JPEG) and GIF, destroy some of the image data during the file-saving process. For that reason, you should save in JPEG or GIF only after you're completely done editing, and only if you want to use the picture for some purpose that requires one of these formats.
- Lossy compression
- Image Size - Keep your images as small as possible (resolution, colour depth, file type, etc.). Remember that there may still be some users without a broadband connection.
- Warning! - Make a copy of your original image. Work with copies. Never work with the original file (unless you can go to the source and get another copy).
- Shrinking Digital Pictures
- Resize your images
- Constrain proportions
- Width: 400 pixels to 600 pixels (px)
- or Height: 300 pixels to 400 pixels (px)
- Change either Width or Height, not both.
- Width: 400 pixels to 600 pixels (px)
- 72 ppi (pixels per inch) is adequate for the Web.
- Always work on a copy of your original picture file. NEVER work with the original.
- Constrain proportions
- Image size - ppt.htm
- Resize your images
- Resize Graphics and Photos for iPad and iPhone - For Dummies
- Baselio - Image compression JPEG, JPG, GIF, BMP, TIFF, PNG - $0
- How to Shrink Digital Photos - Fast, Easy, Free | eHow.com
- Shrinking Digital Photos to Screen Size | Sympatico.ca Sync
- Resize Images online - shrinkpictures.com - $0
- Digital Photos for Email at Shrink Software Informer
- Some people still use a monitor resolution setting of 800 x 600, but some users will view your photos on screens using a lower or higher resolution.
- For pictures that you plan to attach to an e-mail message, limit the picture height to 300 pixels and the picture width to 400 pixels.
- For Web pages, the same pixel dimensions work fine as long as your page has only one image. If you have multiple photos on a page, you should keep your pictures even smaller. Each photo you put on the page adds to the page download time, and you don't want visitors to your site to have to wait several minutes to display the page.
- HTML
- use the width attribute with the src tag to specify a percentage of the width of the user's screen rather than a specific number of pixels.
- <src img="somephoto.jpg" width="35%" align= "right" align="middle">
- use the width attribute with the src tag to specify a percentage of the width of the user's screen rather than a specific number of pixels.
-
- How to Make Animated GIFs | Eric Griffith | PCMag.com
- Animation Factory - Free Animations, Backgrounds and PowerPoint Templates
- Yahoo! Directory Computers and Internet > Graphics
- PC Magazine: Web Graphics Tools (1997-03-04) (Gif Animators)
- Ulead Systems - Innovative Multimedia Solutions
- Web Graphics Tools Page 1 - CWSApps (GIF Animators)
- GIF Animator (by Microsoft)
- GIF Construction Set (by Alchemy)
- Pure CSS GUI icons
- ImageBase, free images, public domain, free photos
- Art Gallery
- Backgrounds Archive
- Barry's Clip Art Server
- Best Animations
- Big Graphics (100% of the user's screen)...
- broenink-art.nl
- Creative Design Web Resources. Your source for free animated gifs, clipart, fonts, backgrounds, midi files, icons and much more.
- Clip-Art.com
- ClipArtConnection.com - The Clip Art Connection
- CoolArchive - Free clip art, fonts, icons, and much more!
- Creative Commons
- Customize.org - Skins & Wallpapers etc. - (Thanks to Tomasz Pomianek 2001-11-22)
- deviantART : where ART meets application :: oderint dum metuant - (Thanks to Tomasz Pomianek 2001-11-22)
- EFF Icons
- Ender Design: Realm Graphics Web Images
- Escher
- EveryStockPhoto.com - your source for free photos
- Flickr: Creative Commons
- Fotosearch.fr - Banque d'Images Libres de Droits - 10,8 Millions de Photos, de Vidéos, d'Illustrations et d'images libres de droits. Une Photothèque et une Vidéothèque disponibles pour votre Recherche. - Thanks to Monica Lilta LE MASTER and Dan Kolmas for recommending this site.
- FreeFoto.Com
- Free Images - Stock Photos
- Google Image Search
- Graphics.com
- IconBazaar
- Ikon Québec
- ImageBase, free images, public domain, free photos
- Jumbo!
- Microsoft Office Clip Art and Media
- MORGUEFILE.COM :: free stock photos archive
- Open Clip Art Library :: openclipart.org
- The Open Photo Project . Free Stock Images .
- Paige Filler
- Pedagoguery Software (GIF animation utilities)
- Rutgers University Network Services WWW Icons and Logos
- stock.xchng - the leading free stock photography site = sxc.hu
- Thant's Animations
- TheCreativeForum.com - Graphic design, art and inspiration - Photos
- Vector art
- velocityart.com
- Web Clip Art
- Web Clip Art - clip art links to everything plus clip art collections
- WebmasterWorld - Free Web Graphics Archive
- WebMuseum
- Color Manipulation Device - utility to help you choose colors for your web pages
- Great Website Design Tips
- HTML...
- watermark--> <body background="filename.gif" bgproperties="fixed">
- GUIstuff
- Spacer.gif is a pixel shim. It is a 1 pixel * 1 pixel transparent GIF. If you would like a copy of it, just right-click on it and Save Image As... to your local disk.
Example: <img SRC="images/spacer.gif" border=0 align=left height=50 width=250>
- List bullet as image (MSIE only)
- <li>This list item should have a graphic bullet</li>
- Not supported by NN 4.xx
- Supported by MSIE 6
- CSS List-style-image property
- CSS1 Test Suite: 5.6.4 list-style-image
- List Style Image
- Tryit Editor
- w3.org/TR/REC-CSS1#list-style-image
- Image Maps (CSIM = Client-Side Image Map) (You should avoid SSIM, Server-side image maps)
- R.Greenlaw & E.Hepp - Chapter #08 - Web Graphics
- Imagemap Authoring Guide and Tutorial Sites
- Internet Engineering Task Force
- MapEdit by Boutell
- <map id="themap">
- <img src="thepicture.gif" width="300" height="400" border="5" alt="This is the mapped image" usemap="#themap" />
-
<head><style type="text/css">
-
.bullet01 { list-style-image: url(images/bullet01.gif) }
-
<area href="aaa.htm" shape="rect" coords="x1, y1, x2, y2" alt="This is a rectangle" />
<area href="bbb.htm" shape="circle" coords="x1, y1, radius" alt="This is a circle" />
<area href="ccc.htm" shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5" alt="This is a polygone" />
</map>
- PNG = Portable Network Graphics - w3.org
- PNG = Portable Network Graphics - Wikipedia
- Lossless data compression
- Transparency isn't the only advanced feature that PNG boasts over GIF. PNG images can also contain a gamma correction value, which is meant to represent the relative brightness of the display on which the image was created. In theory, the browser can use this value to display the image at the exact same brightness on another display.
That's all well and good, except that other image formats and solid colours specified with CSS do not contain this gamma correction value, so when you adjust the display of a PNG based on its gamma information, it no longer matches the other colors on the site.
For this reason, most browsers (including current versions of Firefox, Safari, and Opera) ignore the gamma correction value in PNG images when displaying them on the Web. But Internet Explorer does not, and that's why my PNG images stood out in that browser.
The solution to this problem is to produce PNG images with no gamma correction information in them, so that Internet Explorer will not attempt to correct their display. Unfortunately, Photoshop's "Save for Web" feature doesn't give you that option, so you need to use a separate tool to strip out the gamma correction information that it writes.
A great tool for doing this in Windows is TweakPNG. It's open source and a free download. Simply drag a PNG to the program window and delete the "gAMA" chunk from the list before saving the file. While you're at it, you might as well delete the "tEXt" chunk as well, to save a few extra bytes of file size by removing Adobe's stamp on the file. - PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
- PNG itself does not support animation.
- PNG offers a variety of transparency options.
- PNG-8 - 8-bit - similar to GIF - more advanced compression than GIF, lossless compression
- PNG-24 - 24-bit - similar to JPEG, lossless compression, may be larger than JPEG
- PNG can be more efficient than GIF and JPG