Graphic Images JPEG (Joint Photographic Experts Group)
JPEG Format • Is a compression algorithm used by files in the JFIF format (JFIF = JPEG File Interchange Format) • Commonly referred to as JPEG • Is platform independent • Supported by nearly all graphical browsers, regardless of version • File extension is .jpg or .jpeg • JPEG images contain 24-bit colour
24-bit RGB Colour • Comprised of millions of colours • Also carry greyscale images with results in higher image quality and more rich and subtle colour variations • Does not use palettes for referencing colour information • However, when displayed on 8-bit colour system browser reduces colours to its built-in web palette • Some dithering occurs – but acceptable in photographic images
JPEG Compression • Is a ‘lossy’ compression scheme • Loss is not discernible to the human eye • Able to achieve 10:1 to 20:1 data compression ratios without visible loss in quality • Ratios can go even higher if high image quality is not a priority
Image Loss • Once image quality lost in compression, you can never get it back again • Loss in image quality each time it is decompressed and compressed • Image is degraded each time it is opened and resaved
Variable Compression Levels • You can control the degree to which the image is compressed • The higher the quality the larger the file • Goal is to find the smallest file size with acceptable image quality • Quality of image is denoted by its “Q” setting • Low Q = low image quality, better compression • High Q = better quality, larger files
“Q” Setting • Q setting has not specific mathematical significance • The numbers themselves are not significant, how the image looks and its resulting file size is
Screen Shot of Image Preview in Fireworks 8
Screen Shots Showing Q Settings For Fireworks 8
Screenshots showing corresponding images High Quality – 100 File Size = 351 KB Low Quality – 10 File Size = 6 KB
JPEG Compression • JPEGs need to be decompressed before they can be displayed • Takes a browser longer to decode and assemble • JPEGs can usually be downloaded faster than GIF (depends on file size), but take longer to decompress. • Difference is not really noticeable nowadays
When to Use JPEGs • Ideal for photography and images where there is a lot of tonal variation such as: • Paintings • Complex gray-scale images
Photographic & Continuous-tone Images
Not Good For • Not good at compressing images with areas of solid colour such as: • Logos • Line art • Type • Cartoon-like illustrations • Lossy compression makes flat colours blotchy and pixelated which results in loss of quality in some cases • Not good for sharp edges or typography as it leaves a ripple-like edge
.wmf image
From WMF to JPGWith Low Quality
From WMF to JPGWith High Quality
Progressive JPEGs • Display in a series of passes (like interlacing in GIF) • Each pass contains more detailed information • Graphics programs allow you to specify the number of passes (3, 4 or 5) • Fast Internet connection may not see any passes at all
Progressive Scans Box
Advantages • Provide some indication of the full image • Are generally slightly smaller than standard JPEG files
Disadvantages • Require more processing power to display • Not supported in older browser versions • If a browser cannot identify a Pro-JPEG, it displays a broken graphic image
Creating JPEGs • Popular graphics tools all provide similar options for saving JPEGs • Adobe Photoshop/ImageReady • JASC Paint Shop Pro • Macromedia Fireworks • Save in Progressive JPEG format • Can get side-by-side previews of image • Make sure your file is in RGB or grayscale format • Name file .jpg or .jpeg
Minimizing JPEG File Size • Optimise file to make as small as possible • JPEGs are always 24 bit • Not an option to reduce bit-depth • Play with quality setting • Prepare image prior to compression • Use specialized tools available to make file as small as possible with good quality
Aggressive Compression Ratios • Direct way of optimising a JPEG • Adjust the Quality setting • Used if image has a lot of continuous tone or gradient colours • Can be very aggressive without to much loss of quality • Depends on image • Flat colour and appear ‘blocky or blotchy’
Aggressive Compression Ratios • Software tools can control quality/compression ratios • Fireworks, Paint Shop Pro, Photoshop • Scales vary from 0 to 12, 0 to 100, 1 to 10 • Use a tool that offers a preview • Or do some testing manually • Remember to save a copy of the original image for a fresh compression with each test
