* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download How to choose file formats and compression settings for Web imagery
Survey
Document related concepts
Framebuffer wikipedia , lookup
Edge detection wikipedia , lookup
Apple II graphics wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Adobe Photoshop wikipedia , lookup
Stereoscopy wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Stereo display wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Image editing wikipedia , lookup
Indexed color wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Transcript
IMAGE OPTIMIZATION How to choose file formats and compression settings for Web imagery WEB IMAGERY CHARACTERISTICS SIZE MEASUREMENT • An image used on the web is always measured in pixels, not in inches or picas like in print. SIZE MEASUREMENT • Image resolution on the web is 1:1*— every pixel in an image is displayed. • In Photoshop, always work at a magnification of 100% (Command-1). * The exception are devices with HighDPI screens: iPhones, iPads, and MacBook Pros with Retina displays, and many other devices. Generally, these devices have four pixels for every pixel on a “standard resolution” screen and display Web imagery at 2x their normal size. Standard Resolution High DPI Standard Resolution High DPI SIZE MEASUREMENT • When creating web graphics with fonts in Photoshop, set your image pixels per inch (PPI) setting to 96. • This will allow you to use familiar font sizes in Photoshop. • Ignore the Width and Height in inches —they don’t matter within a Web browser. FILE SIZE • Compared to print, web images are smaller and easier to work with. • However, all images bound for the web require optimization. • Optimization tweaks the image to reduce its file size, which helps reduce image download times. HOW DOES OPTIMIZATION MAKE AN IMAGE SMALLER? • Removes unwanted colors (GIF, PNG) • Removes non-essential visual data (lossy compression; JPEG) • Removes embedded previews, thumbnails, icons and metadata (not always a good thing—think copyright information) • Compresses the image (through JPEG, GIF and PNG file types) GIF Graphic Interchange Format GIF • Developed by CompuServ in the late 1980’s for transmission over a modem. • Uses a lossless compression method to reduce image size. • Limited to a maximum of 256 colors. FEATURES • LZW Compression • • A loss-less method of compression, meaning that the pixel data is unaltered when compressed. Basic Transparency • Uses a simple 1-bit transparency: A color is either transparent or opaque. FEATURES • Color Look-Up Table Contains all of the colors (up to 256) available for a particular GIF image. • Reducing the number of colors in the CLUT reduces the image size. • • Simple Cell-based Animations Photoshop (4,000 bytes) GIF 8 colors (257 bytes) JPEG 80% (1,538 bytes) JPEG 30% (825 bytes) JPEG @ 30% GIF with 8 colors GIF WHEN TO USE GIFS • Navigation elements • Type as a graphic, with or without anti-aliasing • Images with sharp edges or fine detail • Images with a large area of a single color • Simple animations • Animating Hamsters WHEN TO USE GIFS • Navigation elements • Type as a graphic, with or without anti-aliasing • Images with sharp edges or fine detail • Images with a large area of a single color • Simple animations • Animating Hamsters JPEG Joint Photographic Experts Group JPEG • Can display millions of colors (true-color, 24 bit image). • Designed from the beginning for photos • Uses a lossy-method of compression to create very small files sizes. FEATURES • Excellent Compression • • • • Compression is “lossy”, resulting in JPEG artifacts. JPEG reorganizes an image's pixels to reduce file size. Done correctly, these artifacts are only visible when the image is magnified. True-Color Support • JPEGs support millions of colors (24 bit). COMPRESSION QUALITY 0% 50% 100% Photoshop (5,000 bytes) GIF 256 colors (2,545 bytes) JPEG 80% (1,402 bytes) JPEG 0% (490 bytes) OPTIMIZATION TIPS • Save photos for the web between the 60% to 80% quality levels. • Always save your original Photoshop files. • • Once an image is compressed using JPEG, you cannot revert to a previous, superior quality level without the original, uncompressed image. Don’t save CMYK images as JPEGs. WHEN TO USE JPEG • Photographs • Any image requiring more that 256 colors • Complex imagery with soft edges PNG Portable Network Graphics PNG • PNG is (new-ish) file format that brings the best parts of GIF into an open format. • Supports precise color selection and loss-less compression (like GIF). • Provides excellent 8-bit transparency support. • Browser support is now pretty good. 8-BIT TRANSPARENCY • The hallmark feature of PNG is full support for alpha-channel transparency. • This opens the door for the use of adaptable color blending between images and HTML elements. 8-BIT TRANSPARENCY GIF Transparency PNG Transparency 8-BIT TRANSPARENCY GIF–Grad to Black PNG–Grad to Transparency 8-BIT TRANSPARENCY GIF–Grad to Black PNG–Grad to Transparency Photoshop (4,000 bytes) GIF 8 colors (257 bytes) PNG-8 (363 bytes) PNG-24 (1,471 bytes) Photoshop (4,690 bytes) PNG-8 256 colors (2,438 bytes) JPEG 80% (1,402 bytes) PNG-24 lossless (3,634 bytes) WHEN TO USE PNG • Navigation elements • Type as a graphic, with or without anti-aliasing • Images with sharp edges or fine detail • Images with a large area of a single color