SMUSH PRO Guide to Image File Formats

Total Page：16

File Type：pdf, Size：1020Kb

SMUSH PRO Guide to Image File Formats JPEG WebP PNG-8 GIF • Supported on all browsers • NOT supported on Safari • Limited to 256 colors • Supports animation and • No support for animation • Limited animation support • No support for animation transparency or transparency • Uses Lossy compression • Supports transparency • Produces larger file than = = PNG-8 • Best for photography & that also supports • Best for screenshots or large hero images transparency logos with limited color • For animation, WebM or • Uses lossy compression • 25-34% smaller than JPEG palette MP4 produce smaller file WebP Lossless PNG-24 LOSSY VS. LOSSLESS • NOT supported on Safari • Supports transparency • Limited animation support • Produces images with COMPRESSION • Best for reserving full millions of colors without With lossy compression, image detail = loss of detail some of your data will be • 26% smaller than • 3x larger image file than lost forever. Lossy image comparable PNGs compressed JPEG compression permanently removes image data and degrades the image in the WebP produces smaller PNG-32 process. file size than JPEG & SVG PNG equivalent • Supported on all browsers This is not as bad as it • Uses an extra 8-bit alpha sounds, as some detail • Supported on all browsers channel for advanced might not be perceivable transparency capabilities to the human eye. • XML-based markup language used to describe geometric • Useful for creating Lossless compression, shapes and positions in image transparency gradients by contrast, preserves • Produces vector graphics that data so nothing is lost. can be animated with CSS = FUNCTIONAL Lossless algorithms keep • Not allowed by default SIMILARITIES all the necessary data in WordPress due to to recreate the image security risks exactly. VECTOR RASTER Vector images are mathematically Raster graphics consist of a pixels arranged generated from a series of points which on a grid, with each pixel representing a are connected by lines and curves to color. Raster graphics only appear high form geometric shapes. An image can be quality at the resolution they were meant to resized to any shape, large or small without be displayed at. If the image is scaled to a damaging the quality of the image. larger size, pixilation will occur..

Copy Link

Recommended publications

Raster Images in R Graphics by Paul Murrell
48 CONTRIBUTED RESEARCH ARTICLES Raster Images in R Graphics by Paul Murrell Abstract The R graphics engine has new sup- 39837_s_at 1267_at 402_s_at 32562_at 37600_at 1007_s_at 36643_at 1039_s_at 40215_at 39781_at port for rendering raster images via the func- 266_s_at 307_at 38408_at 37539_at 1911_s_at 1463_at 2057_g_at 39556_at 41744_at 34789_at 34850_at rasterImage() grid.raster() 38631_at tions and . This 37280_at 36536_at 37006_at 41397_at 41346_at 40692_at 35714_at 1992_at 33244_at 40167_s_at 32872_at 34699_at 33440_at leads to better scaling of raster images, faster 36275_at 33809_at 40953_at 1308_g_at 1928_s_at 1307_at 40504_at 41742_s_at 41743_i_at 1674_at 40784_at 40785_g_at rendering to screen, and smaller graphics ﬁles. 37978_at 37099_at 1973_s_at 38413_at 2036_s_at 1126_s_at 31472_s_at 37184_at 35256_at 40493_at 41779_at 33412_at Several examples of possible applications of 37193_at 37479_at 39210_at 919_at 1140_at 41478_at 35831_at 176_at 37724_at 38385_at 41401_at 41071_at these new features are described. 39135_at 34961_at 37251_s_at 41470_at 1947_g_at 37810_at 36777_at 38004_at 177_at 36897_at 34106_at 31615_i_at 35665_at 33358_at 39315_at 41191_at 931_at 1914_at 36873_at 37809_at 39635_at 38223_at 33936_at 37558_at 41348_at 31605_at 205_g_at 32475_at 34247_at 36149_at 1500_at 34098_f_at 33528_at 35663_at 40393_at 33193_at 39716_at 33405_at 1929_at 36092_at 32215_i_at 41448_at 40763_at 873_at Prior to version 2.11.0, the core R graphics engine 37225_at 38056_at 37413_at 39424_at 32116_at 2039_s_at 40480_s_at 35816_at 1134_at
[Show full text]
Understanding Image Formats and When to Use Them
Understanding Image Formats And When to Use Them Are you familiar with the extensions after your images? There are so many image formats that it’s so easy to get confused! File extensions like .jpeg, .bmp, .gif, and more can be seen after an image’s file name. Most of us disregard it, thinking there is no significance regarding these image formats. These are all different and not cross‐ compatible. These image formats have their own pros and cons. They were created for specific, yet different purposes. What’s the difference, and when is each format appropriate to use? Every graphic you see online is an image file. Most everything you see printed on paper, plastic or a t‐shirt came from an image file. These files come in a variety of formats, and each is optimized for a specific use. Using the right type for the right job means your design will come out picture perfect and just how you intended. The wrong format could mean a bad print or a poor web image, a giant download or a missing graphic in an email Most image files fit into one of two general categories—raster files and vector files—and each category has its own specific uses. This breakdown isn’t perfect. For example, certain formats can actually contain elements of both types. But this is a good place to start when thinking about which format to use for your projects. Raster Images Raster images are made up of a set grid of dots called pixels where each pixel is assigned a color.
[Show full text]
Image Formats
Image Formats Ioannis Rekleitis Many different file formats • JPEG/JFIF • Exif • JPEG 2000 • BMP • GIF • WebP • PNG • HDR raster formats • TIFF • HEIF • PPM, PGM, PBM, • BAT and PNM • BPG CSCE 590: Introduction to Image Processing https://en.wikipedia.org/wiki/Image_file_formats 2 Many different file formats • JPEG/JFIF (Joint Photographic Experts Group) is a lossy compression method; JPEG- compressed images are usually stored in the JFIF (JPEG File Interchange Format) >ile format. The JPEG/JFIF >ilename extension is JPG or JPEG. Nearly every digital camera can save images in the JPEG/JFIF format, which supports eight-bit grayscale images and 24-bit color images (eight bits each for red, green, and blue). JPEG applies lossy compression to images, which can result in a signi>icant reduction of the >ile size. Applications can determine the degree of compression to apply, and the amount of compression affects the visual quality of the result. When not too great, the compression does not noticeably affect or detract from the image's quality, but JPEG iles suffer generational degradation when repeatedly edited and saved. (JPEG also provides lossless image storage, but the lossless version is not widely supported.) • JPEG 2000 is a compression standard enabling both lossless and lossy storage. The compression methods used are different from the ones in standard JFIF/JPEG; they improve quality and compression ratios, but also require more computational power to process. JPEG 2000 also adds features that are missing in JPEG. It is not nearly as common as JPEG, but it is used currently in professional movie editing and distribution (some digital cinemas, for example, use JPEG 2000 for individual movie frames).
[Show full text]
About Graphics/Digital Images
About Graphics/Digital Images Digital images are found in lots of file formats (types) that are used for various reasons. I liken the file formats to flavors of ice-cream, which you might or might not choose to consume on any given day. One day chocolate is more important than mint; another day you might use vanilla, and on another day you might decide to combine more than one flavor in the same bowl. Likewise, you might choose one type of graphic file for a particular project, but it might be completely inappropriate for another project. What works well for display purposes (keeping it on the computer, or for publication to the internet) might not print well. Something that prints well might be too big a file to post to the internet, or may make your program run too slowly. Also, some authoring programs (like Boardmaker or Classroom Suite) might be written to only understand certain types of image files. Some file types are more common than others, and are more likely to be recognized by the “parent” program (the one you use to display, edit or print your image). Whatever type you pick ultimately depends on how you plan to use the image. The more technical definitions provided below are taken from the glossary found at http://www.photoshopelementsuser.com/glossary.php?letter=B The additional comments I have added, and hopefully let you know why you would care about any of this, anyway. The two biggest types of images I describe here fall loosely into two categories: vector images and bitmap images.
[Show full text]
Digital Preservation Guidance Note: Graphics File Formats
Digital Preservation Guidance Note: 4 Graphics File Formats Digital Preservation Guidance Note 4: Graphics file formats Document Control Author: Adrian Brown, Head of Digital Preservation Research Document Reference: DPGN-04 Issue: 2 Issue Date: August 2008 ©THE NATIONAL ARCHIVES 2008 Page 2 of 15 Digital Preservation Guidance Note 4: Graphics file formats Contents 1 INTRODUCTION .....................................................................................................................4 2 TYPES OF GRAPHICS FORMAT........................................................................................4 2.1 Raster Graphics ...............................................................................................................4 2.1.1 Colour Depth ............................................................................................................5 2.1.2 Colour Spaces and Palettes ..................................................................................5 2.1.3 Transparency............................................................................................................6 2.1.4 Interlacing..................................................................................................................6 2.1.5 Compression ............................................................................................................7 2.2 Vector Graphics ...............................................................................................................7 2.3 Metafiles............................................................................................................................7
[Show full text]
Webp - Faster Web with Smaller Images
WebP - Faster Web with smaller images Pascal Massimino Google Confidential and Proprietary WebP New image format - Why? ● Average page size: 350KB ● Images: ~65% of Internet traffic Current image formats ● JPEG: 80% of image bytes ● PNG: mainly for alpha, lossless not always wanted ● GIF: used for animations (avatars, smileys) WebP: more efficient unified solution + extra goodies Targets Web images, not at replacing photo formats. Google Confidential and Proprietary WebP ● Unified format ○ Supports both lossy and lossless compression, with transparency ○ all-in-one replacement for JPEG, PNG and GIF ● Target: ~30% smaller images ● low-overhead container (RIFF + chunks) Google Confidential and Proprietary WebP-lossy with alpha Appealing replacement for unneeded lossless use of PNG: sprites for games, logos, page decorations ● YUV: VP8 intra-frame ● Alpha channel: WebP lossless format ● Optional pre-filtering (~10% extra compression) ● Optional quantization --> near-lossless alpha ● Compression gain: 3x compared to lossless Google Confidential and Proprietary WebP - Lossless Techniques ■ More advanced spatial predictors ■ Local palette look up ■ Cross-color de-correlation ■ Separate entropy models for R, G, B, A channels ■ Image data and metadata both are Huffman-coded Still is a very simple format, fast to decode. Google Confidential and Proprietary WebP vs PNG source: published study on developers.google.com/speed/webp Average: 25% smaller size (corpus: 1000 PNG images crawled from the web, optimized with pngcrush) Google Confidential and Proprietary Speed number (takeaway) Encoding ● Lossy (VP8): 5x slower than JPEG ● Lossless: from 2x faster to 10x slower than libpng Decoding ● Lossy (VP8): 2x-3x slower than JPEG ● Lossless: ~1.5x faster than libpng Decoder's goodies: ● Incremental ● Per-row output (very low memory footprint) ● on-the-fly rescaling and cropping (e.g.
[Show full text]
A Designer's Guide to Transparency for Print Output
WHITE PAPER A Designer’s Guide to Transparency for Print Output Using Adobe® Creative Suite 2 Soft ware 1 About This Guide 2 Chapter 1: Introduction to Transparency 6 Chapter 2: Creating and Viewing Transparency 15 Chapter 3: Importing Files That Contain Transparency 18 Chapter 4: Building Pages with Transparency 23 Chapter 5: Saving and Exporting Files with Transparency 27 Chapter 6: Printing Files with Transparency 32 Chapter 7: Delivering Files with Transparency to Your Print Service Provider 33 Chapter 8: Transparency-Related Resources Adobe Systems Incorporated • 345 Park Avenue, San Jose, CA 95110-2704 USA • www.adobe.com Adobe, the Adobe logo, Illustrator, Photoshop, InDesign, Acrobat, Distiller, and PostScript are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of Apple Computer, Inc., registered in the United States and other countries. PANTONE® is a trademark of Pantone, Inc. SVG is a trademark of the World Wide Web Consortium; marks of the W3C are registered and held by its host institutions MIT, INRIA and Keio. All other trademarks are the property of their respective owners. © 2005 Adobe Systems Incorporated. All rights reserved. INTRODUCTION TO TRANSPARENCY 1 About This Guide A Designer’s Guide to Transparency for Print Output is for Adobe Creative Suite 2 users who create transparency eff ects using Adobe Photoshop® CS2, Adobe Illustrator® CS2, Adobe InDesign® CS2, and Adobe Acrobat® 7 Professional soft ware. Th e purpose of this guide is to: • Identify and explain the transparency-related features in Illustrator CS2 and InDesign CS2, including how to create, display, import, export, and print transparency eff ects.
[Show full text]
The Webp Manual Was Written by Jeremy Wagner
IMPRINT Imprint © 2018 Smashing Media AG, Freiburg, Germany ISBN (PDF): 978-3-945749-67-8 Cover Design: Ricardo Gimenes eBook Production: Cosima Mielke Tools: Elja Friedman Syntax Highlighting: Prism by Lea Verou Idea & Concept: Smashing Media AG The WebP Manual was written by Jeremy Wagner. 2 Table of Contents Foreword ........................................................................................4 WebP Basics..................................................................................6 Performance................................................................................ 21 Converting Images To WebP ................................................34 Using WebP Images.................................................................62 In Closing.....................................................................................78 Appendix...................................................................................... 80 Thanks...........................................................................................83 About The Author ..................................................................... 84 3 FOREWORD Foreword Performance matters now more than ever. What we send over the wire, how we send it, and how much of it we send matters. Because users matter. Web perfor- mance is a vast subject with many nooks and crannies, and all deserve their due attention. Of serious concern, however, is the role of media in performance, specifically images. Images are powerful. Engaging visuals evoke visceral feelings.
[Show full text]
Graphics and Images
Graphics and Images September 28, Unit 3 Computer Graphics · ªComputer graphics refers to using a computer to create or manipulate any kind of picture, image, or diagram.º · Typically you manipulate an image on your computer with a graphics editing program ± MS Paint ± Adobe Photoshop ± GIMP ± Etc. Bitmapped Graphics · There are two basic types of graphics: ± Bitmapped and ± Vector · Bitmapped graphics are much more common · Often they are called raster graphics · When you create a bitmapped graphic you are basically creating a bunch of colored dots Bitmapped Graphics, cont. · The bitmapped graphic is stored as an array of dots, or pixels · Each pixel gets assigned a specific color · The more pixels you have, the more detailed the image can be ± Imagine only have one pixel, all you get is a dot · Some common bitmap graphics programs are: ± Photoshop ± Paint Shop Pro ± GIMP ± Photo-Paint ± Graphic Converter · These are paint programs Exaggerated Example of a Bitmap Image Vector Graphics · The second major type of computer graphics · Vector graphics are created and manipulated using drawing programs (as opposed to paint programs for bitmapped graphics) · Instead of using pixels to describe the image, it describes the image using shapes ± Circles ± Lines ± Curves · Also has to store the color of these shapes · A verbal example would be something like: ± ªA yellow circle with a center here and a radius of x, a purple line from here to hereº Vector Graphics, cont. · The programs used with vector graphics are drawing programs · Some of these programs include: ± Corel Draw ± Adobe Illustrator ± Acrobat · Most of these programs allow the use of bitmapped images as part of a vector image ± Does not make them paint programs ± Bitmaps are a type of object (like a circle) that can be inserted into a vector image Bitmap vs.
[Show full text]
Transparency in PDF
bbc Transparency in PDF Adobe Developer Technologies Technical Note #5407 30 May 2000 Copyright © 2000 Adobe Systems Incorporated. All rights reserved. NOTICE: All information contained herein is the property of Adobe Systems Incorporated. No part of this publication (whether in hardcopy or electronic form) may be reproduced or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written consent of Adobe Systems Incorporated. PostScript is a registered trademark of Adobe Systems Incorporated. All instances of the name PostScript in the text are references to the PostScript language as defined by Adobe Systems Incorporated unless otherwise stated. The name PostScript also is used as a product trademark for Adobe Systems’ implementation of the PostScript language interpreter. Except as otherwise stated, any reference to a “PostScript printing device,” “PostScript display device,” or similar item refers to a printing device, display device or item (respectively) which contains PostScript technology created or licensed by Adobe Systems Incorporated and not to devices or items which purport to be merely compatible. Adobe, the Adobe logo, Acrobat, Illustrator, Photoshop, and PostScript are trademarks of Adobe Systems Incorporated. All other trademarks are the property of their respective owners. This publication and the information herein is furnished AS IS, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies, makes no warranty of any kind (express, implied, or statutory) with respect to this publication, and expressly disclaims any and all warranties of merchantability, fitness for particular purposes, and noninfringement of third party rights.
[Show full text]
File Formats for Web & Print
FILE FORMATS FOR WEB & PRINT Web Image File Formats GIF – best for type, graphics, logos Preparing images and graphics for use on the web correctly is an Stands for the Graphics Interchange Format. Developed by important concern, but understanding what format to use, what size CompuServe in 1987 as an alternative to JPEGs, it is better suited to to make them, what color profile to attach to them and how they graphics, lines, text, detail, and flat areas of color. will look on screen is even more important. • GIFs are limited to a color space of 256 colors, commonly known as Index Color. JPEG/JPG – best for web images • GIFs are compressed using LZW compression that allows for • The JPG image format is best suited for photographs. non-destructive compressing of the file and thus smaller file size • JPG is a “lossy” compression format that is designed to compress for faster downloading. color and grayscale continuous-tone images. • GIFs are used for images that have few color transitions and little • JPGs do not work as well on graphics with finer details such as detail due to the limited color range of 256 colors for the image. logos, illustrations with fine lines, and images with text or lettering. • GIFS can be arranged together to form an animation sequence. • Images saved as a JPG format can be compressed on a scale from • GIF also supports transparency, where the background color can 0–12. 0 is the lowest quality with noticeable compression lines and be set to transparent in order to let the color on the underlying degradation.
[Show full text]
Windows Metafile Format (Wmf) Specification NOTICE This Specification Is Provided Under the Microsoft Open Specification Promise
Windows Metafile Format (wmf) Specification NOTICE This specification is provided under the Microsoft Open Specification Promise. For further details on the Microsoft Open Specification Promise, please refer to: http://www.microsoft.com/interop/osp/default.mspx. You are free to copy, display and perform this specification, to make derivative works of this specification, and to distribute the specification, however distribution rights are limited to unmodified copies of the original specification and any redistributed copies of the specification must retain its attribution of Microsoft’s rights in the copyright of the specification, this full notice, and the URL to the webpage containing the most current version of the specification as provided by Microsoft. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in these materials. Except as expressly provided in the Microsoft Open Specification Promise and this notice, the furnishing of these materials does not give you any license to these patents, trademarks, copyrights, or other intellectual property. The information contained in this document represents the point-in-time view of Microsoft Corporation on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of authoring. Unless otherwise noted, the example companies, organizations, products, domain names, e- mail addresses, logos, people, places and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, email address, logo, person, place or event is intended or should be inferred.
[Show full text]