Photoshop
WEB 114 Intro to Adobe Photoshop for the web.
Primary Curriculum, Video & Audio, designed by SARA NEWMAN. Additional Content by David Wall.
WEEK 6
TERMS TO KNOW:
Lossy Compression: A lossy compression method is one where compressing data and then decompressing it retrieves data that may well be different from the original, but is close enough to be useful in some way.
Dithering: is a technique used to create the illusion of color depth in images with a limited color palette.
GIF:
GIF (Graphics Interchange Format) was developed by Unisys and licensed by Compuserve as a cross-platform image standard for its users on the Internet. Lossless compression is achieved with the proprietary LZW (Lempel-Ziv-Welch) algorithm. GIF files are limited to 256 different colors or shades of grey.
GIF files do not store actual grey scale values in the image matrix. Instead, single numbers are used, each one of which corresponds to a specific grey scale value in the image. The one-to-one correspondence between a given (index) number and its greyscale value is kept in a look-up table (lut), or palette, which is stored with the image. It is the matrix of index numbers that is compressed with the LZW algorithm. (2)
PNG:
PNG uses the lossless "Deflate" algorithm, which is based on LZ77, the predecessor to LZW. Image processing programs such as those that first "filter" an image so that repeating patterns can be recognized vertically as well as horizontally, for example, can make PNG's use of the "Deflate" algorithm more effective. Although the details need not concern the radiologist, they do help explain why the PNG usually achieves higher compression than GIF.
The Deflate algorithm used by PNG is also used by the well-known pkZIP compression program, which itself can be used to compress files losslessly, including image files. The PNG format can accommodate images with 512 levels of grey, a decided benefit when storing medical images of that depth.
PNG and GIF formats are particularly well suited for Internet graphics such as logos, where uniformity of color etc. leads to significant redundancy of data and high degrees of compression. PNG has additional advantages that are beyond the scope of this paper, although it has not had the widespread acceptance initially predicted.
JPG:
Developed by the Joint Photographics Expiratory group, JPEG is a compression scheme, with JFIF as the associated file format. At present, JPEG compression is based on the DCT (Discrete Cosine Transform) approach. JPEG compression is lossy, although it can be made to operate in lossless mode.
With JPEG compression, the degree of lossiness is under operator control. Because the current implementation of JPEG operates on 8 x 8 pixel segments, images can appear blocky at high compression ratios.
Save For web Lecture
There are two kinds of image compression, lossy and lossless.
Lossy compression compresses the image but does so in a manner that loses image data. Essentially what you see may be a little different then the original but should be close enough to still be useable.The detail loss is usually only visible at closer inspection of the image.
Lossy compression is good for web, because it reduces the amount of memory (or file size) of the image but returns a compressed version of your image that is suited for web use and a faster load time.
Lossless compression: lossless compressions retains the full detail of the original so when you decompress the image it is exactly the same. This is not always optimal for web use because it means a larger file size.
JPEG
JPEG is a format name, (".jpg") This image type is lossy, and you
can control the compression level in image editors. You would use JPEG compression when saving images with millions of colors, like photographs, drawings with many shades, images
containing gradients etc.
GIF
This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent or contain more than one frame, so it can be animated.
GIF images are ideal for saving images with less colors, like charts, small graphics (bullets, website buttons), images containing text
and other important details, flat-color drawings or logos where you need exact colors to match branding needs. etc.
PNG
This format was created to improve on the existing GIF format (GIF was
patented, and thus not free) and allows greater color-depth than GIF. It can also store partial transparency.
A PNG file can achieve greater compression than a GIF, but it still uses lossless format and therefore the images it creates can often be larger than optimal web settings.
Saving images for web JPG
Under File > Save for web... you will find your web saving options.
Saving images with many colors
Saving a photograph at 100% quality
1. Choose File > Save for web...
2. Since it's a photograph, choose JPEG.
3. You can check the option Progressive if you like, it's only difference is how the loading will look
like. Progressive images first appear blurry, and then become clearer as the image loads. Non-progressive
images load line-by-line.
4. First choose quality level, High if the image will be visible, Medium or Low if it's
meant as a background.
5. To have more control over the quality, use the slider or enter number in the field Quality
6. Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings.
At the same time, look at the image to decide on what quality looks good enough.
* background images should be small - under 5KB is good.
*images should not exceed 100KB - As a rule you want to keep the image size under 50KB.
7. Once you have found the perfect balance between quality and compression, click the button Save
Save for web GIF
Coming Soon