![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif){kind=logo}
Making Web Graphics Smaller
What does it mean when your graphics are "too big"? This page describes image size and file size, how big your graphics should be, and how to make your web graphics smaller.
- Terminology
- EPA Web standards for graphics
- File format (GIF and JPG only)
- File size (how big can a page be?)
- Image size (how wide can a graphic be?)
- Why compress?
- Compression formats
- How to reduce the image size - how big it looks
- How to compress graphics
- File format – type of “compression”
used to save the file for web (usually JPG and GIF)
- File size – kilobytes – how
much disk space the file uses
- Image size – pixels wide and high – how much screen space the file uses
EPA Web standards for graphics
File format: use GIF or JPG. Do not use PNG on the Web.
File size: there is no formal standard. However, an EPA web page should add up to about 40-50 KB total – that is, all the text and all the graphics total no more than 50 KB. If you are creating your pages in Dreamweaver you'll see an estimated file size for the page in the status bar (visible in Design view). You can also estimate the file size by adding up the .HTML file size and all the associated graphics and other files. Remember that the EPA seal is about 2.5 KB, as is the top banner and the other graphic elements on a standard web page, so add 7 KB to your page size.
Image size: the total width of everything in the content section of an EPA page can't be more than 450 pixels. That includes graphics, table borders, and text. As a starting point for images intended to expand on text, OPA recommends a width of 200 pixels and whatever height is appropriate to that width.
Compress to make the file size smaller. Compression alone does not affect how big the image looks on the screen, but the smaller file size will load into the visitor's browser quicker, so reducing (compressing) file sizes is important.
GIF – best for graphics with areas of flat color, permits transparency, limits colors. GIF is a commonly used file format that compresses images with areas of single colors, as well as line drawings, very well. Licenses to use GIF format are built into many commercial applications, but some applications do not have licenses with Unisys ... PNG (portable network graphics) was developed to take the place of GIF. It is patent-free, and seems to work well but inconsistently on the web, and is currently not permitted on EPA sites.
JPG – best for photographs or complex illustrations, “lossy” compression means some information is discarded to make the image smaller. JPG handles colors well and is great for compressing photographs so they'll load fast, and still look good.
For more information on compression types
:
http://www.webstyleguide.com/graphics/formats.html
http://www.w3.org/Graphics/
How to reduce image size - how big it looks
Reduce the amount of real estate the graphic uses - do this before compressing the image by cropping the picture or reducing its pixel width and height.
Using Photoshop - open the image and select Image>Image Size... and change the pixel dimensions to the appropriate size. Also set the resolution to 72 pixels/inch.
Or, set the resolution to 72, then draw a rectangle around the part of the image you want to use with the marquee tool, select Image>Crop. Then compress the image.
Using Fireworks - open the image and select Modify>Canvas>Image Size... (to reduce the entire image) or Modify>Canvas>Canvas Size... (to crop the image). Or you can use the crop tool and select the part of the image you want to use. Then compress the image.
Step 1: Always save a copy of the original file. Why?
- JPG discards some data every time you save the file. Every time you save the file as a JPG some data is discarded. With repeated compression the quality of the image will be degraded.
- Compressed files aren't used for print. Compressed files look fine on a computer monitor, but they don't print well. If you have the original file in the native format (Photoshop's native "psd" or the TIFF file from a digital camera, for example) save a copy of it in a safe place. You may need to add text to it in another incarnation, it may go into a print document, or it may be used for some other purpose.
- GIF and JPG cannot be significantly edited. If you've compressed the file with text or layers, those components cannot be changed, so again you'll need the original.
- GIF is appropriate for most ink line drawings, graphics with flat colors, or if you need transparency
- JPG is appropriate for pencil drawings, delicate line work, and photographs.
- Photoshop has a "Save for Web"
feature that allows you to see multiple compression ratios
side by side - you can decide how much data to discard while
maintaining image quality. Open the image and select File>Save
for Web... (or Alt+Shift+Ctrl+S)
Click on the tab with 4-Up on it to see multiple versions of the image you want to compress. Set the type of compression (GIF or JPG) and quality in the right side panel. Each version will indicate the files size in kilobytes (K).
Step 3b: How to compress a graphic in Fireworks.
- Open the file in Fireworks and select
File>Export Preview... (or Ctrl+Shift+X).
The Export Preview window will open with an example of the compressed file. To compare various compression ratios, click on the little box near the bottom of the preview window that looks like a 4-part box:
- This will show you multiple options for exporting the file. Notice in the screen image below that in the left panel there is a place to select Format: (in this case GIF) and selection boxes which allow you to select preset options. A trash can icon near the bottom of the window allows you to discard specific colors (which may help to reduce the file size), and the option to set transparency for that image. To the right of this panel are four versions of the image compressed in different ways - in each window you'll notice the file size for that compression setting. Experiment with options to get the smallest file size without sacrificing too much image quality.
Step 3c: How to compress a graphic in Paint Shop Pro.
- Open the file in Paint Shop Pro and
select Image-->Resize (this will also dramatically reduce
the file size of the image).
Then, go to File-->Export-->JPEG Optimizer (or GIF Optimizer for .gif files), and select the compression value. You can see exactly how many bytes the image will be, and you can use the cross-shaped multi-directional sign right under the word "Zoom" to focus on a specific part of the image to see if it will show up clearly. The higher the compression, the lower the file size will be.
