Already on ArticleSlash?

Forgot your password? Sign Up

Optimizing Images For the Web in Photoshop

Kevin M. Sugrue

Visitors: 140

An important, often overlooked, stage in creating files for the web is optimization. Users with slower internet connections take longer to load larger images. Optimizing images before uploading them to your website will curb this problem and make your pages load much more quickly for all of your users.

When you intend to publish your images online, you can utilize Photoshop's built in file compression options. The save for web option will help you choose the best file type and the best compression ratio for your images. In this chapter we will discuss the save for web option and you will learn how to compress your images effectively.

JPEG Images

JPEG, or Joint Photographic Experts Group, is a file format name. The extension for this format is . jpg. The compression method is usually lossy compression, meaning that some visual quality is lost in the process and cannot be restored. JPEG is good for saving images with millions of colors, like photographs, drawings with many shades, and images containing gradients.

There are variations on the standard baseline JPEG that are lossless, however these are not yet widely supported.

There are also many medical imaging systems that create and process 12-bit JPEG images. The 12-bit JPEG format has been part of the JPEG specification for some time, but again, this format is not as widely supported.

There is also an interlaced “Progressive JPEG" format. This format is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. When Progressive JPEG format is used, data is compressed in multiple passes of progressively higher detail. However, progressive JPEGs are not as widely supported.

GIF Images

GIF is a file format that stands for Graphics Interchange Format, and was first used in 1987. This format is a bitmap. Bitmap images are formed from a grid made of tiny pixel squares. Data about every pixel is saved. The GIF format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. This format also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing photographs and other images with continuous color, but it is used most for more simple images such as graphics or logos with solid areas of color.

Photoshop can control the exact number or colors stored in a particular image. This makes GIF a good format for saving images with limited colors, like charts, small graphics and icons, images containing text and other important details, and flat-color drawings.

GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without compromising the visual quality. This compression technique was patented in 1985. A controversy arose in 1994 over the licensing agreement between Unisys, the patent holder, and CompuServe. The issue inspired the development of the Portable Network Graphics (PNG) standard. Since that time, all the relevant patents have expired. The GIF format is still widely used and acceptable for many tasks in Photoshop.

This article is written by Kevin M. Sugrue and is an extract from part of ‘The Essentials of Web Layouts in Photoshop’ Ebook. For more go to


Article Source:

Rate this Article: 
SEO optimizing on the sidelines
Rated 4 / 5
based on 5 votes

Related Articles:

Learning Photoshop - How To Get Digital Masterpieces Out Of Your Images

by: David Martin Peters (May 11, 2008) 
(Computers and Technology/Software)

Editing Digital Images Made Life-Like With Photoshop CS6

by: Mandy Hathaway (May 15, 2012) 
(Computers and Technology/Software)

Learn Photoshop Now - Photoshop Black and White

by: David Martin Peters (May 07, 2008) 
(Arts and Entertainment/Photography)

Link Building Using Images Why Images Are Not Worth 1,000 Words

by: James Orr (July 24, 2008) 
(Internet and Businesses Online/Link Popularity)

Photoshop Tutorial Downloads How to Use Photoshop

by: Lawrence Schmidt (July 23, 2008) 
(Computers and Technology/Software)

Raster Images or Vector Images – Which one is better?

by: Atiqur Sumon (November 27, 2010) 
(Arts and Entertainment)

Photoshop CS4 Or Photoshop CS64?

by: Matthew Murchie (August 21, 2008) 
(Computers and Technology/Software)

How Effective Are Blog Images in Your Blog Posts? Do You Really Need to Use ..

by: Jack N Jones (June 29, 2008) 
(Internet and Businesses Online/Web Design)

What Are HDR Images And Why Are They Better Then Standard Images?

by: Jason Dick (July 04, 2007) 
(Arts and Entertainment/Photography)

SEO optimizing on the sidelines

by: Nick Tsilosani (December 06, 2011) 
(Internet and Businesses Online/SEO)