We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byHope Cox
Modified over 5 years ago
File Formats COM 366 Web Design & Layout
Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save for Web” in PhotoShop to export as jpeg file
Graphic files Raster or bitmap graphics –Use pixels –PhotoShop
Vector graphics –Use mathematical formulas –Combine lines, points, curves Fill with colors –Flash
GIF format (.gif) Graphic interchange format GIF images use indexed color –Maximum of 256 colors Compressed –Reduce file size –“lossless” means image doesn’t lose any quality by being compressed
Biggest advantage is that one color can be transparent –Allow background on Web page to show thru Can be interlaced –Download in layers with each layer adding more detail
Interlaced file displaying every 8th row; this is how the file first loads. Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.
Best used for text or illustrations or cartoons
JPEG file (.jpeg) or.jpg Joint Photographic Experts Group Best used for photos Uses “lossy” compression scheme –Some detail is lost –Reduces file size
Progressive JPEG –Similar to interlacing for GIF file –Downloads in waves or layers
Big advantage of jpeg is that it can contain millions of colors Can choose from various compression levels –Low = more degradation –Higher the quality level, greater file size
Quality = 10, 4.7 kB Quality = 100, 83.2 kB Quality = 50, 15.1 kB
Best used for photos
File sizes File sizes measured in bytes Bit smallest unit of measurement on computer –On / off, 1 or 0 8 bits = 1 byte One byte equals about one letter “A”
A 1,000 bytes = kilobyte (kB) A million bytes = megabyte (MB) A trillion bytes = gigabyte (GB) Lowercase b would mean bits –Mb
Other formats PNG (.png) – Portable network graphics – Developed as replacement for GIF – Not patented – Lossless compression – Transparent background – Can have more colors than gif (PNG-24)
PNG-8 uses 8-bit color – 256 colors – Comparable to gif PNG-24 – Supports millions of colors – Comparable to jpeg Larger file size than jpeg But uses lossless compression
What a cat image looks like saved as a PNG-24 and placed against a patterned background on the HTML page:
.html Hypertext markup language All web pages have to be in this format Only format Web browsers (Safari, Firefox) can read
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Color COM 366 Web Design & Production. RGB color Amount of light in each channel Closer to 255, whiter color gets Every color has value for red,
2.01 Understand Digital Raster Graphics
Graphics in the web Digital Media: Communication and Design
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
Web Design, 4 th Edition 5 Typography and Images.
1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images: Scanning Be aware.
Web Design, 5 th Edition 5 Typography and Images.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
Task 01 – Explain how different types of graphical images relate to file formats, file conversions, formats and compression. Emily Riley.
Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.
File Formats About graphic file formats And image compression.
THE COLORS OF LIGHT RED, GREEN and BLUE
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
All About File Formats Mr. Butler John Jay High School Department of Technology.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.
© 2021 SlidePlayer.com Inc. All rights reserved.