DOCSLIB.ORG

Optimizing Images for the Web

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Optimizing Images for the Web 9/16/2010 Optimizing Images for the Web Optimize Web Applications Improve Performance & Availability of Critical Web-Based Applications. www.ca.com Download Image Resizer Resize & Convert Bulk Images JPEG TIFF GIF RAW BMP JPG PCX etc. avs4you.com/AVS-Image-Converter Free Veer® Images add-in For Microsoft® Office. To Create A Perfect Presentation. Free Download Veer.com/VeerImagesAddin Links To This Guide: Getting Started | What Makes a Good Site | Plan Your Site | Design and Layout | How to Create Your Web By Alan Flum of Celestial Graphics Inc. Pages | How to Put Your Site on the Net | Optimizing Images for the More Information Web E-Commerce Tutorial HTML Tutorial Do you want to make your site load fast Recommended Reading but still look good? This section will tell you how to create fast loading images for Optimizing Images for the your web page. Web What Software Should I Use? The Most Common Mistake Park Your Domain for Free! Web Hosting Packages Once, I was asked to look at why a very simple web page will one small image and about 400 words of text took over 1 minute to load. The answer was simple and is a mistake I see over and over again. The original image, which was large, was scaled to a small image size in a web site creation program, not an image editing program. DO NOT resize your images in your website design program. The result will be a small image with the same file size . DO resize your image in your image editing program. When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are www.aksi.net/optimizing-images.htm 1/3 9/16/2010 Optimizing Images for the Web actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser. The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download. When you use an image editing program to resize the image, and you save it as a JPEG or GIF, you have actually created a smaller image. Now that postage stamp size image that you saved as a postage size JPEG will now load quickly on your visitor's computer. GIF and JPEG: Two Image Formats You Need to Know About If you want to optimize your images the first thing you need to know about is the two image formats recognized by your web browser. These are GIF (pronounced jif as in Jiffy Peanut Butter) and JPEG (pronounced Jay-Peg). Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to minimize the file size. The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations. Some Examples: Low Quality Medium Quality High Quality JPEG Image: JPEG Image: JPEG Image: size 3KB size 6KB size 8KB Notice the more you compress a JPEG image, the more artifacts you begin to see. This is because you are actually loosing information. JPEG compression is therefore called lossy compression. You may also notice that the color fidelity does not change. Colors are not lost in JPEG images. When you use JPEG compression you will trade off between image quality and image file size. In the example above, the Medium Quality image is acceptable and is 2KB small than the high quality example. Note: if you had tried to use GIF compression on the rose, the file size would be over 15KB. www.aksi.net/optimizing-images.htm 2/3 9/16/2010 Optimizing Images for the Web 4 Colors 16 colors 256 colors GIF Image: GIF Image: GIF Image: size 0.9KB size 1.1KB size 1.4KB GIF is a lossless compression. Data is not lost. However, color fidelity is not preserved. This is because GIF indexes or limits the total number of colors to 256 or less. When using GIF compression, you trade off between color fidelity and image size. In the example above the 16 color image gives acceptable color fidelity and its file size is almost as small as the 4 color image. Note: that if you tried to use JPEG compression on this image, the file size would have been over 2.3K . Google Search Copyright © by Acquired Knowledge Systems Inc. Website Design by Celestial Graphics ™ Privacy Policy | Site Security | Terms of Use | Contact and Internet Access Info | | About Us | Give Us Your Feedback | www.aksi.net/optimizing-images.htm 3/3.
Load more

Recommended publications
  • Free Lossless Image Format
    FREE LOSSLESS IMAGE FORMAT Jon Sneyers and Pieter Wuille [email protected] [email protected] Cloudinary Blockstream ICIP 2016, September 26th DON’T WE HAVE ENOUGH IMAGE FORMATS ALREADY? • JPEG, PNG, GIF, WebP, JPEG 2000, JPEG XR, JPEG-LS, JBIG(2), APNG, MNG, BPG, TIFF, BMP, TGA, PCX, PBM/PGM/PPM, PAM, … • Obligatory XKCD comic: YES, BUT… • There are many kinds of images: photographs, medical images, diagrams, plots, maps, line art, paintings, comics, logos, game graphics, textures, rendered scenes, scanned documents, screenshots, … EVERYTHING SUCKS AT SOMETHING • None of the existing formats works well on all kinds of images. • JPEG / JP2 / JXR is great for photographs, but… • PNG / GIF is great for line art, but… • WebP: basically two totally different formats • Lossy WebP: somewhat better than (moz)JPEG • Lossless WebP: somewhat better than PNG • They are both .webp, but you still have to pick the format GOAL: ONE FORMAT THAT COMPRESSES ALL IMAGES WELL EXPERIMENTAL RESULTS Corpus Lossless formats JPEG* (bit depth) FLIF FLIF* WebP BPG PNG PNG* JP2* JXR JLS 100% 90% interlaced PNGs, we used OptiPNG [21]. For BPG we used [4] 8 1.002 1.000 1.234 1.318 1.480 2.108 1.253 1.676 1.242 1.054 0.302 the options -m 9 -e jctvc; for WebP we used -m 6 -q [4] 16 1.017 1.000 / / 1.414 1.502 1.012 2.011 1.111 / / 100. For the other formats we used default lossless options. [5] 8 1.032 1.000 1.099 1.163 1.429 1.664 1.097 1.248 1.500 1.017 0.302� [6] 8 1.003 1.000 1.040 1.081 1.282 1.441 1.074 1.168 1.225 0.980 0.263 Figure 4 shows the results; see [22] for more details.
    [Show full text]
  • Supported File Types
    MyFax Supported File Formats Document Type Versions Extensions Adobe Portable Document Format (PDF) All Versions PDF Adobe Postscript All Versions PS Adobe Photoshop v. 3.0 and above PSD Amiga Interchange File Format (IFF) Raster Bitmap only IFF CAD Drawing Exchange Format (DXF) All AutoCad compatible versions DXF Comma Separated Values Format All Versions CSV Compuserve Graphics Interchange Format GIF87a, GIF89a GIF Corel Presentations Slide Show v. 96 and above SHW Corel Word Perfect v. 5.x. 6, 7, 8, 9 WPD, WP5, WP6 Encapsulated Postscript All Versions EPS Hypertext Markup Language HTML only with base href tag required HTML, HTM JPEG Joint Photography Experts Group All Versions JPG, JPEG Lotus 1-2-3 v. 2, 3, 4, 5, 96, 97, 9.x 123, WK1, WK3, WK4 Lotus Word Pro v. 96, 97, 9.x LWP Microsoft Excel v. 5, 95, 97, 2000, 2003, 2007 XLS, XLSX Microsoft PowerPoint v. 4 and above PPT, PPTX Microsoft Publisher v. 98, 2000, 2002, 2003, 2007 PUB Microsoft Windows Write All Versions WRI Microsoft Word Win: v. 97, 2000, 2003, 2007 Mac: v. 4, 5.x, 95, 98 DOC, DOCX Microsoft Word Template Win: v. 97, 2000, 2003, 2007 Mac: v. 4, 5.x, 95, 98 DOT, DOTX Microsoft Works Word Processor v. 4.x, 5, 6, 7, 8.x, 9 WPS OpenDocument Drawing All Versions ODG OpenDocument Presentation All Versions ODP OpenDocument Spreadsheet All Versions ODS OpenDocument Text All Versions ODT PC Paintbrush Graphics (PCX) All Versions PCX Plain Text All Versions TXT, DOC, LOG, ERR, C, CPP, H Portable Network Graphics (PNG) All Versions PNG Quattro Pro v.
    [Show full text]
  • Imecom Print-2-Image Conversion Driver
    IMECOM PRINT-2-IMAGE CONVERSION DRIVER Conve rt any document or file into high-quality TIFF, PDF, JPG, GIF, BMP, PCX, and DCX im age formats quickly and easily using Print-2-Image. DATASHEET OVERVIEW ABOUT IMECOM GROUP Print-2-Image™ enables you to convert any printable document or file into a high- quality image with ease. Using Print-2-Image, you can render files from any desktop Imecom Group began developing and or server-based application to various image formats simply by printing to Print-2- selling fax server software and image Image. If you can print it, Print-2-Image can convert it! conversion/printer driver software in 1989. Headquartered in New Hampshire, Print-2-Image has multiple image printer drivers built-in which enable you to Imecom Group presently supports over create high-quality image files in the format you desire. 12,000 solutions in 62+ countries, and we're growing fast. As we continue to • TIFF Printer Driver reach new technology levels, one thing • PDF Printer Driver remains constant: excellent customer support. Imecom Group maintains the • JPG Printer Driver highest quality level of customer support • GIF Printer Driver services in our market. It is one of the • BMP Printer Driver many reasons companies such as Alticor, Sears, Cigna, Johnson & Johnson • PCX Printer Driver Healthcare, Cerner, and others choose to • DCX Printer Driver implement our technology. We do not, and will not, forget that it is our customers All printer drivers are embedded within Print-2-Image to create a single solution for who help us be successful.
    [Show full text]
  • Multi-Media Imager Horizon ® G1 Multi-Media Imager
    Hori zon ® G1 Multi-media Imager Horizon ® G1 Multi-media Imager Ove rview The Horizon G1 is an intelligent, desktop dry imager that produces diagnostic quality medical films plus grayscale paper prints if you choose the optional paper feature. The imager is compatible with many industry standard protocols including DICOM and Windows network printing. Horizon also features direct modality connection, with up to 24 simultaneous DICOM connections . High speed image processing, Optional A, A4 ,14”x17” 8” x10”, 14” x17” 11” x 14” Grayscale Pape r Blue and Clear Film Blue Film networking and spooling are standard. Speci fica tions Print Technology: Direct thermal (dry, daylight safe operatio n) Spatial Resolution: 320 DP I (12.6 pixels/mm) Throughput: Up to 100 films per hour Time To Operate: 5 minutes (ready to print from “of f”) Grayscale Contrast Resolutio n: 12 bits (4096) Media Inputs: One supply cassette, 8 0-100 sheets Media Outputs: One receive tray, 5 0-sheet capacity Media Sizes: 8” x 1 0”, 14” x 17” (blue and clea r), 11” x 14 ”(blu e) DirectVista ® Film Optional A, A4, 14” x 17” Direct Vista Grayscale Paper Dmax: >3.10 with Direct Vista Film Archival: >20 years with DirectVista Film, under ANSI extended-term storage conditions Media Supply: All media is pre-packaged and factory sealed Interfaces: Standard: 10/ 100/1,000 Base-T Ethernet (RJ- 45), Serial Console Network Protocols: Standard: 24 DICOM connections, FT P, LPR Optional: Windows network printing Image Formats: Standard: DICOM, TIFF, GIF, PCX, BMP, PGM, PNG, PPM, XWD, JPEG, SGI (RGB), Sunrise Express “Swa p” Service Sun Raster, Targa Smart Card from imager being replaced Optional: PostScript™ compatibility contains all of your internal settings such a s Image Qualit y: Manual calibration IP addresses, gamma and contras t .
    [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]
  • 1:10 000 Scale Raster User Guide and Technical Specification
    1:10 000 Scale Raster User guide Contents Section Page no Preface ..................................................................................................................................................3 Contact details ..........................................................................................................................3 Use of the product.....................................................................................................................3 Purpose and disclaimer ............................................................................................................3 Copyright in this guide ..............................................................................................................4 Data copyright and other intellectual property rights ................................................................4 Trademarks...............................................................................................................................4 Back-up provision of the product ..............................................................................................4 Using this guide.........................................................................................................................4 Chapter 1 Introduction .............................................................................................................................5 Chapter 2 Content.....................................................................................................................................7
    [Show full text]
  • Snowbound Supported File Formats
    Snowbound Supported File Formats This document describes the file type number, descriptions, and read/write capabilities of all supported file formats. We have provided two tables of information, one sorted by file format name, and the other by the file type number. RasterMaster and VirtualViewer® HTML5 are powerful conversion tools that can transform your documents and images into many different formats. Some format types are limited in the amount of color (bit-depth) they support in an image. Some file formats read and write only black and white (1-bit deep) and other file formats support only color images (8+ bits deep). For many of these cases, the product automatically converts the pixel depth to the appropriate value, based on the output format specified. The chart below will help you determine whether your black and white or color document will be able to convert straight to the desired output format with no additional processing. When saving to a format, if the error returned is PIXEL_DEPTH_UNSUPPORTED (-21), the output format does not support the current bits per pixel of the image you are trying to save. The chart below will help you identify formats with compatible bit depths. 1 FILE FORMAT KEY File Format Description 1-bit Black and white or monochrome images. 4-bit, 8-bit, 16-bit Grayscale images, that may appear to be black and white, but contain much more information and are much larger than 1-bit. 8-bit, 16-bit, 24-bit, 32-bit Full color images. Please note that the higher the bit depth (bits per pixel), then the larger the size of the image on the disk or in memory.
    [Show full text]
  • An Application for the Comparison of Lossless Still Image Compression Algorithms
    INTERNATIONAL JOURNAL OF CIRCUITS, SYSTEMS AND SIGNAL PROCESSING Volume 8, 2014 An Application for the Comparison of Lossless Still Image Compression Algorithms Tomáš Vogeltanz, Pavel Pokorný compression method in which the original data blocks are Abstract—This paper describes the comparison of results of altered or some less significant values are neglected in order to lossless compression algorithms used for still image processing. In achieve higher compression ratios. In this case, the order to create this comparison, an application was developed which decompression algorithm generates different values than allows one to compare the effectiveness and quality of modern before compression. Lossy compression methods are mainly lossless image compression algorithms. The first section of this paper describes the evaluation criteria of the compression algorithm used in the compression of video and audio. [1] effectiveness. The second section briefly summarizes the types of Symmetric and asymmetric is another way of division compression algorithms and the graphic file formats that the compression algorithms. Symmetric Compression occurs in the application supports and tests. The following section describes the case where the time (and also usually the number and type of architecture of the application and its user interface. The final section operations) required to compress and to decompress data is contains the comparison of results for JPEG photos, RAW photos, grayscale photos, High-Dynamic-Range (HDR) color photos, High- approximately the same. Asymmetric compression has a Dynamic-Range (HDR) grayscale photos, 24-bit images, 8-bit different required time to compress and decompress. In data images, 4-bit images, 1-bit images, grayscale images, 1-bit text compression, most compression algorithms require one to images, and grayscale text images.
    [Show full text]
  • Breeze - Import Data Guide Breeze Ver.2020.1.0 Updated: 2020-12-02
    Breeze - Import data guide Breeze ver.2020.1.0 Updated: 2020-12-02 Breeze - Import data guide This user guide will show how to import different types of data, image files and Breeze study files into Breeze. Available types of import Feature name Description Import images Import image data files such as hyperspectral images (e.g. .raw files) Import variables and id data Import variables and id from separate spreadsheet file (e.g. .xls file, with known class labels or continuous data) for training a classification or quantification model. Observations in different rows and variables in different columns. Automatic matching with sample/image based on measurement name column in the spreadsheet. Import variables from image file(s) Import variable values from images where each pixel has been matched to values for one or several variables. Values will be mapped to pixels in the image. Import study Import Breeze study with recorded measurements (images), connected models and Analyse Tree Supported image file formats: File format Extensions Breeze xml file xml ENVI Files bil, bip, bsq, raw, img, bin, dat HySpex hyspex Matlab files mat HDF files h5, hdf Image files jpg,jpeg,wbmp,png,wbmp,bmp,pbm,pgm,ppm,pcx,tif,tiff,gif,bmp,jp2 SAC file sac HIPS File hips Copyright Prediktera AB 1 of 5 www.prediktera.com [email protected] Breeze - Import data guide Breeze ver.2020.1.0 Updated: 2020-12-02 Import images - using one dark and one white reference file for all imported images 1. Start Breeze 2. Enter the Record view by pressing the “Record” button.
    [Show full text]
  • Data Compression
    7 Image Compression (GIF) 7.1 Introduction Data communication increasingly involves the transmission of still and moving images. Compressing images into a standard form can give great savings in transmission times and storage lengths. Some of these forms are outlined in Table 7.1. The main parameters in a graphics file are: The picture resolution. This is defined by the number of pixels in the x- and y-directions. The number of colors per pixel. If N bits are used for the bit color then the total number of displayable colors will be 2N. For example, an 8-bit color field defines 256 colors, a 24-bit color field gives 224 or 16.7M colors. Most computer systems allow for 32-bit col- or, which gives over 4 billion colors. Palette size. Some systems reduce the number of bits used to display a color by reducing the number of displayable colors for a given palette size. Table 7.1 Typical standard compressed graphics formats File Compression Max. resolution type or colors TIFF Huffman RLE 48-bit color TIFF (tagged image file format) is typically used to and/or LZW transfer graphics from one computer system to another. It allows high resolutions and colors of up to 48 bits (16 bits for red, green and blue). PCX RLE 65 536 65 536 Graphics file format which uses RLE to compress the (24-bit color) image. Unfortunately, it make no provision for storing gray scale or color-correcting tables. GIF LZW 65 536 65 536 Standardized graphics file format which can be read (24-bit color, but by most graphics packages.
    [Show full text]