คู่มือผู้ใช้ ยกเลิก

Optimization options for Images and Animated GIFs

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

Use this topic to learn the various options for exporting images and animated GIFs.

Web graphic formats

Web graphics formats can be either bitmap (raster) or vector. The bitmap formats—GIF, JPEG, and PNG—are resolution-dependent, meaning that a bitmap image’s dimensions, and possibly image quality, will change at different monitor resolutions. The vector formats—SVG and SWF—are resolution-independent and can be scaled up or down without losing any image quality. The vector formats can also include raster data. 

JPEG optimization options

JPEG is the standard format for compressing continuous-tone images such as photographs. Optimizing an image as a JPEG format relies on lossy compression, which selectively discards data.

Optimization settings A. File Format menu B. Compression Quality menu C. Optimize menu

Quality

Determines the level of compression. The higher the Quality setting, the more detail the compression algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting. View the optimized image at several quality settings to determine the best balance of quality and file size.

Optimized

Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.

Progressive

Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format.

 Progressive JPEGs require more RAM for viewing and are not supported by some browsers.

Blur

Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blurfilter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.

Embed Color Profile (Photoshop) or ICC Profile (Illustrator)

Preserves color profiles in the optimized file. Some browsers use color profiles for color correction.

Matte

Specifies a fill color for pixels that were transparent in the original image. Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color,Background Color, White, Black, or Other (to use the color picker).

Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially transparent in the original image are blended with the selected color.

GIF and PNG‑8 optimization options

GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or illustrations with type. Like the GIF format, the PNG‑8 format efficiently compresses solid areas of color while preserving sharp detail.

PNG‑8 and GIF files support 8‑bit color, so they can display up to 256 colors. The process of determining which colors to use is called indexing, so images in GIF and PNG‑8 formats are sometimes called indexed color images. To convert an image to indexed color, a color lookup table is built to store and index the colors in the image. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.

In addition to the following options, you can also adjust the number of colors in the image’s color table.

Lossy (GIF only)

Reduces file size by selectively discarding data. A higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy option can reduce file size by 5% to 40%.

 You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.

Color Reduction Method and Colors

Specifies a method for generating the color lookup table and the number of colors you want in the color lookup table. You can select one of the following color reduction methods:

Perceptual Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.

Selective Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.

Adaptive Creates a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.

Restrictive (Web) Uses the standard 216‑color color table common to the Windows and Mac OS 8‑bit (256‑color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8‑bit color. (This palette is also called the web‑safe palette.) Using the web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.

Custom Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG‑8 file, it will have a custom color palette.

 Use the Color Table palette in the Save For Web & Devices dialog box to customize the color lookup table.

Black and White, Grayscale, Mac OS, Windows Use a set palette of colors.

Dithering Method and Dither

Determines the method and amount of application dithering. Dithering refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid colors may work well with no dither. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.

GIF image with 0% dither (left), and with 100% dither (right)

You can select one of the following dithering methods:

Diffusion Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels.

Pattern Applies a halftone-like square pattern to simulate any colors not in the color table.

Noise Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.

Transparency and Matte

Determines how transparent pixels in the image are optimized.

  • To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.

  • To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.

  • To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).

 The Foreground Color and Background Color options are only available in Photoshop.

Examples of transparency and matting

A. Original image B. Transparency selected with a matte color C. Transparency selected with no matting D. Transparency deselected with a matte color

Transparency Dithering

When the Transparency option is selected, you can choose a method for dithering partially transparent pixels:

  • No Transparency Dither applies no dither to partially transparent pixels in the image.

  • DiffusionTransparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image.

  • Pattern Transparency Dither applies a halftone-like square pattern to partially transparent pixels.

  • Noise Transparency Dither applies a random pattern similar to the Diffusion algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.

Example of Pattern Transparency dithering (left) and applied to a web page background (right)

Interlace

Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress. However, interlacing also increases file size.

Web Snap

Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors from dithering in a browser). A higher value shifts more colors.

Optimize transparency in GIF and PNG images

Transparency makes it possible to create nonrectangular images for the web. Background transparency preserves transparent pixels in the image.

This allows the background of the web page to show through the transparent areas of your image. Background matting simulates transparency by filling or blending transparent pixels with a matte color that can match the web page background. Background matting works best if the web page background is a solid color and if you know what that color is.

Use the Transparency and Matte options in the Save For Web & Devices dialog box to specify how transparent pixels in GIF and PNG images are optimized.

  • (GIF and PNG‑8) To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
  • To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.
  • (GIF and PNG‑8) To make all pixels with greater than 50% transparency fully transparent and all pixels with 50% or less transparency fully opaque, select Transparency and select None from the Matte menu.
  • (PNG‑24) To save an image with multilevel transparency (up to 256 levels), select Transparency. The Matte option is disabled since multilevel transparency allows an image to blend with any background color.

 In browsers that do not support PNG‑24 transparency, transparent pixels may be displayed against a default background color, such as gray.

To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).

 The Foreground Color and Background Color options are only available in Photoshop.

View the color table for an optimized slice

The color table for a slice appears in the Color Table panel in the Save For Web & Devices dialog box.

Select a slice that is optimized in GIF or PNG‑8 format. The color table for the selected slice appears in the SaveFor Web & Devices color table.

If an image has multiple slices, the colors in the color table may vary between slices (you can link the slices first to prevent this from happening). If you select multiple slices that use different color tables, the color table is empty and its status bar displays the message “Mixed.”

Customize the color table for GIF and PNG‑8 images

You use the color table in the Save For Web & Devices dialog box to customize the colors in optimized GIF and PNG‑8 images. Reducing the number of colors often preserves image quality while reducing the file size of the image.

You can add and delete colors in the color table, shift selected colors to web‑safe colors, and lock selected colors to prevent them from being dropped from the palette.

Sort a color table

Choose a sorting order from the Color Tablepalette menu:

  • Unsorted restores the original sorting order.
  • Sort By Hue sorts by the location of the color on the standard color wheel (expressed as a degree from 0 to 360). Neutral colors are assigned a hue of 0 and located with the reds.
  • Sort By Luminance sorts by the lightness or brightness of a color.
  • Sort By Popularity sorts by the colors’ frequency of occurrence in the image.

Add a new color to the color table

You can add colors that were left out in building the color table. Adding a color to a dynamic table shifts the color in the palette closest to the new color. Adding a color to a fixed or Custom table adds an additional color to the palette.

  1. If any colors are currently selected in the color table, choose Deselect All Colors from theColor Table palette menu to deselect them.

  2. Choose a color by doing one of the following:

    • Click the Eyedropper Color box in the SaveFor Web & Devices dialog box and choose a color from the color picker.

    • Select the Eyedropper tool in the Save For Web & Devices dialog box and click in the image.

  3. Do one of the following:

    • Click New Color option in the color table.

    • Select New Color from the Color Table palette menu.

    • To switch the color table to a Custom palette, hold down Ctrl (Windows) or Command (Mac OS) when you add the new color.

      The new color appears in the color table with a small white square in the lower right corner, indicating that the color is locked. If the color table is dynamic, the original color is displayed in the upper left and the new color is displayed in the lower right.

Select colors in the color table

A white border appears around selected colors in the Color Table.

  • To select a color, click the color in the Color Table.
  • To select multiple colors in the color table, press Shift and click another color. All colors in the rows between the first and second selected colors are selected. To select a non-adjacent group of colors, press Ctrl (Windows) or Command (Mac OS) and click each color that you want to select. The Color Table palette menu also provides commands for selecting colors.
  • To select a color in the preview image, click in the preview with the Save For Web & Devices Eyedropper tool. Shift‑click to select additional colors.
  • To deselect all colors, choose Deselect All Colors from the Color Tablepalette menu.

Shift a color

You can change a selected color in the color table to any other RGB color value. When you regenerate the optimized image, the selected color changes to the new color wherever it appears in the image.

  1. Double-click the color in the color table to display the default color picker.

  2. Select a color.

    The original color appears at the upper left of the color swatch and the new color at the lower right. The small square at the lower right of the color swatch indicates that the color is locked. If you shift to a web‑safe color, a small white diamond appears at the center of the swatch.

  3. To revert a shifted color to its original color, do one of the following:

    • Double-click the swatch for the shifted color. The original color is selected in the color picker. Click OK to restore the color.

    • To revert all shifted colors in a color table (including web-shifted colors), choose Unshift All Colors from the Color Tablepalette menu.

Shift colors to the closest web palette equivalent

To protect colors from dithering in a browser, you can shift the colors to their closest equivalents in the web palette. This ensures that the colors won’t dither when displayed in browsers on either Windows or Macintosh operating systems capable of displaying only 256 colors.

  1. Select one or more colors in the optimized image or color table.

  2. Do one of the following:

    • Click the Web Shift button in the Color Table palette.

    • Choose Shift/Unshift Selected Colors To/From Web Palette from the Color Tablepalette menu.The original color appears at the upper left of the color swatch and the new color at the lower right. The small white diamond  in the center of the color swatch indicates that the color is web‑safe; the small square at the lower right of the color swatch indicates that the color is locked.

  3. To set a tolerance for shifting, enter a value for Web Snap. A higher value shifts more colors.

  4. To revert web-shifted colors, do one of the following:

    • Select a web-shifted color in the color table and click the Web Shift button in the Color Table palette.

    • To revert all web-shifted colors in the color table, choose Unshift All Colors from the Color Table palette menu.

Map colors to transparency

You can add transparency to an optimized image by mapping existing colors to transparency.

  1. Select one or more colors in the optimized image or color table.

  2. Do one of the following:

    • Click the Map Transparency button  in the Color Table palette.

    • Choose Map/Unmap Selected Colors To/From Transparent from the Color Tablepalette menu.

      The transparency grid  appears in half of each mapped color. The small square at the lower right of the color swatch indicates that the color is locked.

  3. To revert transparency to original color, do one of the following:

    • Select the colors you want to revert and click the Map Transparency button  or choose Map/Unmap Selected Colors To/From Transparent from the Color Table palette menu.

    • To revert all transparency-mapped colors, chooseUnmap All Transparent Colors.

Lock or unlock a color

You can lock selected colors in the color table to prevent them from being dropped when the number of colors is reduced and to prevent them from dithering in the application.

 Locking colors does not prevent them from dithering in a browser.

  1. Select one or more colors in the color table.

  2. Lock the color by doing one of the following:

    • Click the Lock button .

    • Choose Lock/Unlock Selected Colors from the Color Table palette menu.

    A white square  appears in the lower right corner of each locked color.

  3. Unlock the color by doing one of the following:

    • Click the Lock button .

    • Choose Lock/Unlock Selected Colors from the Color Table palette menu.

    The white square disappears from the color swatch.

Delete selected colors

You can delete selected colors from the color table to decrease the image file size. When you delete a color, areas of the optimized image that previously included that color are rerendered using the closest color remaining in the palette.

When you delete a color, the color table automatically changes to a Custom palette. This is because the Adaptive, Perceptual, and Selective palettes automatically add the deleted color back into the palette when you reoptimize the image—the Custom palette does not change when you reoptimize the image.

  1. Select one or more colors in the color table.

  2. Delete the color by doing one of the following:

    • Click the Delete icon.

    • Choose Delete Color from the Color Table palette menu.

Save a color table

You can save color tables from optimized images to use with other images and to load color tables created in other applications. Once you load a new color table into an image, the colors in the optimized image are changed to reflect the colors in the new color table.

  1. Select Save Color Table from the Color Table palette menu.

  2. Name the color table and choose a location where it will be saved. By default, the color table file is given the extension .act (for Adobe Color Table).

    If you want to access the color table when selecting Optimization options for a GIF or PNG image, save the color table in the Optimized Colors folder inside the Photoshop application folder.

  3. Click Save.

     When you reload the table, all shifted colors will appear as full swatches and will be unlocked.

Load a color table

  1. Select Load Color Table from the Color Table palette menu.

  2. Navigate to a file containing the color table you want to load—either an Adobe Color Table (.act) file, an Adobe Color Swatch (.aco) file, or a GIF file (to load the file’s embedded color table).

  3. Click Open.

PNG‑24 optimization options

PNG‑24 is suitable for compressing continuous-tone images; however, it produces much larger files than JPEG format. The advantage of using PNG‑24 is that it can preserve up to 256 levels of transparency in an image.

Transparency and Matte

Determine how transparent pixels in the image are optimized.

Interlace

Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress. However, interlacing also increases file size.

 Adobe

รับความช่วยเหลือได้เร็วและง่ายกว่าเดิม

หากคุณเป็นผู้ใช้ใหม่

Adobe MAX 2024

Adobe MAX
การประชุมความคิดสร้างสรรค์

14-16 ต.ค. Miami Beach และออนไลน์

Adobe MAX

การประชุมความคิดสร้างสรรค์

14-16 ต.ค. Miami Beach และออนไลน์

Adobe MAX 2024

Adobe MAX
การประชุมความคิดสร้างสรรค์

14-16 ต.ค. Miami Beach และออนไลน์

Adobe MAX

การประชุมความคิดสร้างสรรค์

14-16 ต.ค. Miami Beach และออนไลน์