- Transparency | Transparent background ... (How to convert an image)
- Always use PNG, or JPG (= JPEG), or GIF (only for animations or transparency)
- Never NEVER use BMP, PCX, TIFF, etc...
- GIF = Graphics Interchange Format
- JPEG = Joint Photogaphic Experts Group
- PNG = Portable Network Graphics
BMP= BitMaP (only works with Microsoft products)IFF = Interchange File FormatJFIF = JPEG File Interchange FormatTIFF = Tag Image File Format- JPEG, GIF, or PNG: Which to Use When at WhoIsHostingThis.com - | - Thanks to Richard for recommending this site.
- JPEG, GIF, or PNG? Image Filetypes Explained and Tested
- How to Choose a Web Image Format for Your HTML5 and CSS3 Based Web Pages - dummies
- 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
- JPEG vs. PNG: Which compressed image format is better? | Digital Trends
- JPG is dying. Check out these 4 modern successors | PCWorld
- AVIF = AV1 Image File Format
- JPEG XL - (not supported by Chromium browsers)
- WebP
- HEIC (High Efficiency Image Coding) and HEIF (High Efficiency Image Format) - Apple
- See also: PowerToys ...
- See also: PowerToys ...
- See also: HTML
- Always use CSIM
- Never use SSIM
- GIF - Wikipedia = Graphics Interchange Format
- See also: Format
- Pronunciation
- Controversial.
- In May 2013 at the Webby Awards, while accepting a Lifetime Achievement Award for inventing the GIF format, Steve Wilhite used his platform to state definitively: "It's pronounced JIF, not GIF."
- Wilhite and his team initially intended and specified the pronunciation with a soft 'G' (or jif), deliberately echoing the American peanut butter brand Jif's slogan: "Choosy programmers choose... 'jif'."
- G stands for hard-G graphics
Animated GIFs:- Make A Gif - Animated Gifs Maker, Free Gif Creator Online
- Gifsicle: Command-Line Animated GIFs
- The GIF Is on Its Deathbed - The Atlantic - Subscription$
- Make an animated GIF from a slide show - Office Support
- GIPHY | Search All the GIFs & Make Your Own Animated GIF
- GIF vs Jif: Peanut butter maker wants to end the pronunciation debate - TechRepublic (see image)
- How to create animated GIFs for presentations at work - TechRepublic
- Imgur Tool Converts Videos to GIFs | PCMag
- GIF Maker | Free Online Animated GIF Maker - Make A GIF Easily
- Best apps to make animated GIFs | Digital Trends
- Animation Factory - Free Animations, Backgrounds and PowerPoint Templates
- Ulead Systems - Innovative Multimedia Solutions
- Web Graphics Tools Page 1 - CWSApps (GIF Animators)
- GIF Animator (by Microsoft)
- GIF Construction Set (by Alchemy)
- Pedagoguery Software (GIF animation utilities)
- Digimarc Corporation - ImageBridge Image Tracking
- Gemini 2.0 Flash image generator removes watermarks
- Free Online Image Editors for Photoshop Effects (No Limitations) - MakeUseOf
- Adobe Express Background Remover (Web), Watermark Remover (Web, Upscale.Media (Web, Android, iOS), Shrink.Media (Web), ZMO Remover (Web), ImgTools (Web)
- Icons
- GIPHY | Search All the GIFs & Make Your Own Animated GIF
- 2 ways to quickly copy graphic files in Word or PowerPoint - TechRepublic
- Save the MS-Word file as a web page (File (menu) > Save As > Web Page). Do not save as a filtered web page ("Web Page, Filtered") because the image resolution will be reduced. All graphics will now be saved to a folder (in the location you chose).
- Rename the MS-PowerPoint (.PPTX) file or MS-Word (.DOCX) file as a .ZIP file. When you open the .ZIP file, you will find all the graphic, movie, and audio files in the Media folder.
- The best sites for finding high-quality, free images - ICTEvangelist
- Art Gallery
- Backgrounds Archive
- Barry's Clip Art Server
- Best Animations
- Big Graphics (100% of the user's screen)...
- broenink-art.nl
- CanStockPhoto | $$ - starting at $39.00/week (=$769.00/year), up to $1,234.00/week (=$23,804.00/year) | Thanks to Joe Kelnhofer for recommending this site.
- GoGraph | Stock Photography, Vectors, Royalty Free Illustrations and Stock Video Footage | $5/image | Thanks to Joe Kelnhofer for recommending this site.
- Barewalls.com | Posters, Art Prints, Canvas & Framed Wall Art at Barewalls.com - Thanks to Jordan Walczak for recommending this site.
- Clip Art Library :: openclipart.org
- Clip-Art.com
- ClipArtConnection.com - The Clip Art Connection
- 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)
- Ender Design: Realm Graphics Web Images
- Escher
- EveryStockPhoto.com - your source for free photos
- Flickr: Creative Commons
- Fotoearch | $$ - starting at $39.00/week (=$769.00/year), up to $509.00/week (=$9,999.00/year) | Thanks to Monica Lilta LE MASTER and Dan Kolmas for recommending this site.
- Free Images - Stock Photos
- Google Image Search
- Graphics.com
- Ikon Québec
- Jumbo!
- MorgueFile.com :: free stock photos archive
- Open Clip Art Library :: openclipart.org
- The Open Photo Project . Free Stock Images .
- Paige Filler
- Pixabay - Free Images - Pixabay
- 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
- WebMuseum
- YouTube
- HTML...
- Annotating images with figures and figure captions
- HTML images - Learn web development | MDN
- Annotating images with figures and figure captions
- The Figure with Optional Caption element - HTML | MDN
- The Figure Caption element - HTML | MDN
- <figure>
<img src="/shared-assets/images/examples/elephant.jpg" alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure> - Why doesn't this code work?
- HTML images - Learn web development | MDN
- Annotating images with figures and figure captions
- watermark--> <body background="filename.gif" bgproperties="fixed">
- 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
- CSS1 Test Suite: 5.6.4 list-style-image
- List Style Image
- Tryit Editor
- w3.org/TR/REC-CSS1#list-style-image
- 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
- Jpeg Compress | jpg size reducer with our image compressor - Thanks to Brooklyn Bella for recommending this site.
- Compress your images with our free online image compressor tool that compresses JPEG, JPG, PNG, SVG, GIF, Heic and WEBP image files with the original image quality.
- 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.
- Image Maps (CSIM = Client-Side Image Map) (You should avoid SSIM, Server-side image maps)
- MapEdit by Boutell
- <map id="themap">
- <img src="thepicture.gif" width="300" height="400" border="5" title="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"
title="This is a rectangle" />
<area href="bbb.htm" shape="circle" coords="x1, y1, radius" title="This is a circle" />
<area href="ccc.htm" shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5" title="This is a polygone" />
</map>
- Icons in Windows files:
- C:\Windows\System32\shell32.dll
- C:\Windows\explorer.exe
- C:\Windows\System32\accessibilitycpl.dll
- C:\Windows\System32\ddores.dll
- C:\Windows\System32\gameux.dll
- C:\Windows\System32\imageres.dll
- C:\Windows\System32\moricons.dll
- C:\Windows\System32\mmcndmgr.dll
- C:\Windows\System32\mmres.dll
- C:\Windows\System32\netcenter.dll
- C:\Windows\System32\netshell.dll
- C:\Windows\System32\networkexplorer.dll
- C:\Windows\System32\pifmgr.dll
- C:\Windows\System32\pnidui.dll
- C:\Windows\System32\sensorscpl.dll
- C:\Windows\System32\setupapi.dll
- C:\Windows\System32\wmploc.dll
- C:\Windows\System32\wpdshext.dll
- PNG = Portable Network Graphics - w3.org
- PNG = Portable Network Graphics - Wikipedia
- Lossless data compression
- Transparency | Transparent background ... (How to convert an image)
- 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