home *** CD-ROM | disk | FTP | other *** search
/ Mac Easy 2010 May / Mac Life Ubuntu.iso / casper / filesystem.squashfs / usr / share / gimp / 2.0 / help / en / gimp-using-web.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  9.6 KB  |  217 lines
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>2.¬† Preparing your Images for the Web</title>
  7.     <link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
  8.     <link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
  9.     <link rel="stylesheet" href="gimp-help-custom.css" type="text/css" />
  10.     <link rel="alternate stylesheet" href="gimp22.css" type="text/css" title="gimp22" />
  11.     <meta name="generator" content="DocBook XSL Stylesheets V1.73.2" />
  12.     <link rel="start" href="index.html" title="GNU Image Manipulation Program" />
  13.     <link rel="up" href="gimp-images-out.html" title="Chapter¬†6.¬† Getting images out of GIMP" />
  14.     <link rel="prev" href="gimp-images-out.html" title="Chapter¬†6.¬† Getting images out of GIMP" />
  15.     <link rel="next" href="gimp-using-web-reducing-file-size.html" title="2.2.¬† Reducing the File Size Even More" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">2.¬†
  22.     <span lang="en" xml:lang="en">Preparing your Images for the Web</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="gimp-images-out.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  27.           <th width="60%" align="center">Chapter¬†6.¬†
  28.         <span lang="en" xml:lang="en">Getting images out of GIMP</span>
  29.       </th>
  30.           <td width="20%" align="right">¬†<a accesskey="n" href="gimp-using-web-reducing-file-size.html"><img src="../images/next.png" alt="Next" /></a></td>
  31.         </tr>
  32.       </table>
  33.       <hr />
  34.     </div>
  35.     <div class="sect1" lang="en" xml:lang="en">
  36.       <div class="titlepage">
  37.         <div>
  38.           <div>
  39.             <h2 class="title" style="clear: both"><a id="gimp-using-web"></a>2.¬†
  40.     <span lang="en" xml:lang="en">Preparing your Images for the Web</span>
  41.   </h2>
  42.           </div>
  43.           <div>
  44.             <div class="revhistory">
  45.               <table border="1" width="100%" summary="Revision history">
  46.                 <tr>
  47.                   <th align="left" valign="top" colspan="3">
  48.                     <b>Revision History</b>
  49.                   </th>
  50.                 </tr>
  51.                 <tr>
  52.                   <td align="left">Revision $Revision: 2437 $</td>
  53.                   <td align="left">2007-07-15</td>
  54.                   <td align="left">romanofski</td>
  55.                 </tr>
  56.               </table>
  57.             </div>
  58.           </div>
  59.         </div>
  60.       </div>
  61.       <a id="id2591062" class="indexterm"></a>
  62.       <p>
  63.     One of the most common purposes <acronym class="acronym">GIMP</acronym> is used for
  64.     is to prepare images for adding them to a web site. This means that
  65.     images should look as nice as possible while keeping the file
  66.     size as small as possible.  This little step-by-step guide will tell
  67.     you how to achieve a smaller file size with minimal degradation of
  68.     image quality.
  69.   </p>
  70.       <div class="sect2" lang="en" xml:lang="en">
  71.         <div class="titlepage">
  72.           <div>
  73.             <div>
  74.               <h3 class="title"><a id="gimp-using-web-size-vs-quality"></a>2.1.¬†
  75.       <span lang="en" xml:lang="en">Images with an Optimal Size/Quality Ratio</span>
  76.     </h3>
  77.             </div>
  78.           </div>
  79.         </div>
  80.         <p>
  81.       An optimal image for the web depends upon the image type and the file
  82.       format you have to use. If you want to put a photograph with a lot of
  83.       colors online, you have to use
  84.       <a class="link" href="gimp-images-out.html#file-jpeg-save" title="1.2.2.¬† Saving as JPEG">JPEG</a>
  85.       as your primary file format. If your image contains fewer colors, that
  86.       is, if it is not a photograph, but is more a drawing you created (such
  87.       as a button or a screenshot), you would be better off using
  88.       <a class="link" href="gimp-images-out.html#file-png-load">PNG</a>
  89.       format. We will guide you through the process of doing this.
  90.     </p>
  91.         <div class="procedure">
  92.           <ol type="1">
  93.             <li>
  94.               <p>
  95.           First, open the image as usual. I have opened our Wilber as an
  96.           example image.
  97.         </p>
  98.               <div class="figure">
  99.                 <a id="id2591145"></a>
  100.                 <p class="title">
  101.                   <b>Figure¬†6.6.¬†
  102.             <span lang="en" xml:lang="en">The Wilber image opened in RGBA mode.</span>
  103.           </b>
  104.                 </p>
  105.                 <div class="figure-contents">
  106.                   <div class="mediaobject">
  107.                     <img src="../images/using/preparing_for_web1.png" alt="The Wilber image opened in RGBA mode." />
  108.                   </div>
  109.                 </div>
  110.               </div>
  111.               <br class="figure-break" />
  112.             </li>
  113.             <li>
  114.               <p>
  115.           The image is now in RGB mode, with an additional
  116.           <a class="link" href="glossary.html#glossary-alpha" title="Alpha">Alpha channel</a>
  117.           (RGBA). There is usually no need to have an alpha channel for your
  118.           web image. You can remove the alpha channel by
  119.           <a class="link" href="gimp-image-flatten.html" title="9.19.¬† Flatten Image">flattening the image</a>.
  120.         </p>
  121.               <p>
  122.           If you open a photograph, you probably won't have to remove the
  123.           alpha channel, because a photograph doesn't usually have one, so the
  124.           file is already opened in RGB mode.
  125.         </p>
  126.               <div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
  127.                 <table border="0" summary="Note">
  128.                   <tr>
  129.                     <td rowspan="2" align="center" valign="top" width="25">
  130.                       <img alt="[Note]" src="../images/note.png" />
  131.                     </td>
  132.                     <th align="left">Note</th>
  133.                   </tr>
  134.                   <tr>
  135.                     <td align="left" valign="top">
  136.                       <p>
  137.             If the image has a soft transition into the transparent areas, you
  138.             cannot remove the alpha channel, since the information which would
  139.             be used for fading out will not be saved in the file. If you would
  140.             like to save an image with transparent areas which do not have a
  141.             soft transition, (similar to
  142.             <a class="link" href="gimp-images-out.html#file-gif-save" title="1.2.1.¬† Saving as GIF">GIF</a>),
  143.             you can remove the alpha channel.
  144.           </p>
  145.                     </td>
  146.                   </tr>
  147.                 </table>
  148.               </div>
  149.             </li>
  150.             <li>
  151.               <p>
  152.           After you have flattened the image, you are able to
  153.           <a class="link" href="gimp-file-save.html" title="5.7.¬† Save">save the image</a>
  154.           in <a class="link" href="gimp-images-out.html#file-png-save-defaults">PNG format</a>
  155.           for your web site.
  156.         </p>
  157.             </li>
  158.           </ol>
  159.         </div>
  160.         <div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
  161.           <table border="0" summary="Note">
  162.             <tr>
  163.               <td rowspan="2" align="center" valign="top" width="25">
  164.                 <img alt="[Note]" src="../images/note.png" />
  165.               </td>
  166.               <th align="left">Note</th>
  167.             </tr>
  168.             <tr>
  169.               <td align="left" valign="top">
  170.                 <p>
  171.         You can save your image in PNG format with the default settings, but
  172.         using maximum compression. Doing this will have no negative affects on
  173.         the quality of the picture, as it would have with
  174.         <a class="link" href="gimp-images-out.html#file-jpeg-save" title="1.2.2.¬† Saving as JPEG">JPEG</a>
  175.         format. If your image is a photograph with lots of colors, you would
  176.         be better off saving it as jpeg. The main thing is to find the best
  177.         tradeoff between quality and compression. You can find more
  178.         information about this topic in <a class="xref" href="gimp-images-out.html#file-jpeg-save" title="1.2.2.¬† Saving as JPEG">Section¬†1.2.2, ‚Äú
  179.         <span lang="en" xml:lang="en">Saving as JPEG</span>
  180.       ‚Äù</a>.
  181.       </p>
  182.               </td>
  183.             </tr>
  184.           </table>
  185.         </div>
  186.       </div>
  187.     </div>
  188.     <div class="navfooter">
  189.       <hr />
  190.       <table width="100%" summary="Navigation footer">
  191.         <tr>
  192.           <td width="40%" align="left"><a accesskey="p" href="gimp-images-out.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  193.           <td width="20%" align="center">
  194.             <a accesskey="u" href="gimp-images-out.html">
  195.               <img src="../images/up.png" alt="Up" />
  196.             </a>
  197.           </td>
  198.           <td width="40%" align="right">¬†<a accesskey="n" href="gimp-using-web-reducing-file-size.html"><img src="../images/next.png" alt="Next" /></a></td>
  199.         </tr>
  200.         <tr>
  201.           <td width="40%" align="left" valign="top"><a accesskey="p" href="gimp-images-out.html">Chapter¬†6.¬†
  202.         <span lang="en" xml:lang="en">Getting images out of GIMP</span>
  203.       </a>¬†</td>
  204.           <td width="20%" align="center">
  205.             <a accesskey="h" href="index.html">
  206.               <img src="../images/home.png" alt="Home" />
  207.             </a>
  208.           </td>
  209.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="gimp-using-web-reducing-file-size.html">2.2.¬†
  210.       <span lang="en" xml:lang="en">Reducing the File Size Even More</span>
  211.     </a></td>
  212.         </tr>
  213.       </table>
  214.     </div>
  215.   </body>
  216. </html>
  217.