Export for the Web

Use Pixelmator to prepare and save your images for the Web easily, whether it is an individual image or an entire Web page layout.

Preparing images for the Web usually includes these steps:

  1. Slicing images as needed.

    As slices divide an image into smaller images, each can be optimized using different optimization settings. Slicing is useful for Web page layouts with different elements, such as buttons, logos, layouts with different backgrounds, and other objects. However, if you are working with a single Web graphic, you do not need to divide it.

  2. Optimizing images.

    Optimizing an image for the Web means compromising between image display quality and file size. You can use the optimize features in Pixelmator to preview optimized images in different file formats and different format settings, as well as to compare them with the original images.

  3. Saving images.

In Pixelmator, there are five standard file formats for which your image can be optimized and then saved for Web.

File format

Description

JPEG The standard high-quality format usually used for optimizing photographs. For a JPEG image, you can specify the level of quality, which determines the level of compression, and a matte color. The matte color specifies the color for pixels that were transparent in the original image.
PNG A format used for high-quality images that contain transparency. Transparency can be enabled and disabled, just as matte color can also be set.
GIF Standard low-quality format used to compress images with crisp detail, such as illustrations, logos, etc. GIF supports only up to 256 colors, and you can specify the number of colors that should be used. Using fewer colors means smaller file sizes. You can also make fully transparent pixels transparent by enabling transparency and setting a matte color.
PNG Indexed Almost the same as GIF; the only difference is that it efficiently compresses solid areas of color while preserving sharp detail.
WebP A new image format that provides lossy compression for images. You can specify the level of quality, which determines the level of compression, and a matte color. The matte color specifies the color for pixels that were transparent in the original image.
1. Choose Share > Export for Web. 2. In the Tool Options bar: #img:"1342186783000.jpg":"ExportForWeb.jpg"# **A** - Drag and drop the thumbnail to save the optimized image quickly. **B** - Optimize the image by choosing JPEG, PNG, PNG Indexed, GIF, or WebP from the Format pop-up menu. **C** - Specify format options such as quality and matte color for JPEG and WebP, transparency color for PNG, and quality of colors and matte color for PNG Indexed and GIF. 3. Click the Next button. The Export dialog appears. 4. In the Export dialog, enter a name for the image. 5. Choose the locations for your image. 6. Click the Save button to save changes, Cancel to quit without saving.
  1. Choose Share > Export for Web.
  2. In the Tool Options bar:

img:"1342186783000.jpg":"ExportForWeb.jpg"

A - Drag and drop the thumbnail to save the optimized image quickly.

B - Optimize the image by choosing JPEG, PNG, PNG Indexed, GIF, or WebP from the Format pop-up menu.

C - Specify format options such as quality and matte color for JPEG and WebP, transparency color for PNG, and quality of colors and matte color for PNG Indexed and GIF.

  1. Click the Next button. The Export dialog appears.
  2. In the Export dialog, enter a name for the image.
  3. Choose the locations for your image.
  4. Click the Save button to save changes, Cancel to quit without saving.

SEE ALSO

Slice images for the Web

Export to other file formats

Save documents