Preparing Images for the Web

Almost every web site contains some sort of image, and there is a good chance that those images have been touched up with an image editing app. Whether it is for an individual image or an entire web page layout, image editing apps offer every tool you need to prepare and save your images for the web easily.

Individual images are prepared especially for the web so that Internet browsers can load images in web sites as fast as possible. When preparing images for the web, you have to balance image appearance with file size. This process is called optimizing.

In most image editing apps, an Export for Web feature optimizes images automatically for you. You will instantly see the preview of the image or image slice as you experiment with different optimization settings.

The most common file types used on the web are JPG, PNG and GIF. The standard file format for photos is JPG. Images that have see-through areas should be saved in PNG file format, which supports transparency, while the GIF format is great for small images with lots of solid color, such as banners, logos and the like.

Slicing Up Images for the Web

Use the Slice Tool to divide an image into smaller images and to optimize each part of an image with its own optimization settings. Slicing is particularly useful for web page layouts that feature different elements, such as buttons, logos, layouts with different backgrounds and other objects.

The Slice Tool works hand in hand with the Export for Web feature and shows an optimization preview for each slice in real-time. To learn more about exporting and slicing images, click here to watch a quick video tutorial about the Export for Web feature in Pixelmator.

Web Colors

Web Colors is a plug-in for the Apple Colors palette that allows you to select and copy hexadecimal colors quickly for use with HTML or CSS apps. If you use Pixelmator, Web Colors will automatically be there for you—no need to do any additional installation.

Trim and Reveal All

Many web designers use these features. Trim allows cropping of an image by trimming the surrounding transparency or background pixels of a specified color. Reveal All does exactly the opposite of the Trim feature: It reveals images that are hidden under the canvas area. Try these features—these two are real time savers.

Image Size

One great thing for web devs is the Fit Into feature, which allows you to quickly fit an image into the desired dimensions by choosing a size from the presets pop-up menu. Learn more about image size here.

Image editing apps such as Pixelmator have almost everything else you might ever need, not only to create, edit and enhance your images, but also to quickly and easily prepare your images for the web.