When creating navigation buttons, text, or graphics for websites or e-mails; in order for your images to look their best, and to load quickly, it’s important to save and optimise them correctly. Depending on your image requirements, there are different ways of implementing this. This Photoshop CS through to CS5 tutorial explains a little about your saving options, and why one option will suit your needs better than another.
Optimise And Save Animations
Understand The Workspace And Palettes
To save your work, from the top menu choose File. In the subsequent drop-down list (Screen Capture), either choose Save - or Save as: and select a file format, as illustrated below.
Save As Or Save
It is good practise, especially when manipulating photographs, or artwork, to select Save as rather than Save. This prevents permanent (irreversible) changes to the original photograph - or artwork. Choose Save when you are working with a copy, (and the original is safe) - or, when you are incrementally saving your image, as you alter it.
Alternatively, choose Save for web, and optimise your images as explained in this
JPEG’s Verses Gif?
Create Transparent GIFs
Understanding Colour Models
A Brief Explanation Of Transparent Gifs
In my starry background example here, the text and yellow graphic were created and saved independently - to make them appear seamless against the black background, they have been saved as Transparent Gifs. If you look at the following images, you will see they are surrounded (stroked) with a black outline.
The graphics therefore appear seamless against a black, or dark, background, as illustrated below.
However, this would not be suitable for white - or light patterned backgrounds, or indeed, any other light colour. This is because the black stroke will appear around the image, and ruin the appearance.
Therefore, if your website background, or e-mail, is cream, or a light colour - or pattern, you would surround your image with white or cream, and as a consequence, your graphic or text, would appear seamless, as illustrated below.
1/ Tutorial - Create A Transparent GIF
To see how Transparent Gifs work, remove the background from an image, or create text on a transparent (chessboard) background, as explained in my Removing Backgrounds tutorials - or my Text tutorials. Alternatively, open the transparent cat and dog image (found Here), onto Photoshop’s workspace - apply a drop shadow if you wish - (by clicking the (f, fx) icon at the bottom of the Layers Palette - or applying an Eyecandy filter.
Then from the top menu, choose File then choose Save for web; and you will see the following Save for Web dialogue box.
Because your image is a Transparent Gif, ensure there is a tick in the Transparency tick box, highlighted above.
My settings provide the clearest (and richest coloured) Transparent Gif possible. Ensure you click the following arrow and set the file to be saved as a Gif.
Images react independently, therefore, experiment with all of the Gif settings, and discover the best settings for your images.
In addition, click open the Matte tab and set it to white.
The Matte tab determines the colour that surrounds your image - and its drop shadow - therefore, choosing white, surrounds it with white.
Equally, changing the Matte to black (or any other colour), will surround your image with black - or the colour you have chosen.
As illustrated below.
Which is perfect to place against a black or dark patterned website background, but not so appropriate for a white, or light paltered background. Therefore, when creating transparent text, or graphics, choose a (solid) Matte colour that matches the dominant colour, or pattern, of your website, or e-mail background, the closest. When you are happy with the look and quality of your graphic, choose Save and upload it to your website in your usual way.
Gifs - Points to Remember
1) Gifs are best suited to simple graphics with few colours, such as plain text, screen captures, and line drawings. As Gif supports a maximum of 256 colours, it is best to keep the number of colours to a minimum, thereby ensuring better quality graphics.
2/ Gif reduces your file size, enabling your web pages to download quicker. Remember! slow loading web sites tend to encourage visitors to give up and go elsewhere.
3/ Gif supports Internet Browser Transparency, and animation.
4/ Gifs will give crisp edges to text, while Jpegs may blur the edges.
The maximum colours allowed for Transparent Gifs are 256, if you have a high coloured image always save it with its with 256 colours, however, if you are saving text that has one colour, or just a few - you can reduce the size of the (Colour tab) from 256 - this reduces the file size.
Jpegs or Gifs
When creating images for a web site - or sending via e-mail, your main consideration should be download times for visitors - this is especially important for visitors who have a dial-up modem; for example, if they visit a web site with lots of graphics that have not been correctly optimised, they may not wait for your web site to load - attention spans for website visitors are short.
Generally speaking, if you are sending/uploading coloured photographs, you will be better off using the Jpeg format. Equally, if you have flat plain coloured graphics - or text, saving it as a Gif might be advisable.
Jpegs support up to 16.7 million colours whilst Gifs support a maximum 256 colours
Because of this - for optimum quality, photographs should always be saved and Jpegs, and text - or images with a maximum of 256 colours, should (for crispness) always be saved as Gifs. Put simply, the Channel Mixer (top menu, Image then Adjustments then Channel Mixer), comprises of the following Red, Green and Blue colour channels, and each channel comprises of 256 colours; which, when multiplied, produce a maximum of 16.7 million colours.
Understanding Colour Models Tutorial Here!
Every time you open a Gif into Photoshop to modify and re-save it, its quality will degrade; therefore save the original image in PSD format first. This ensures you have a perfect backup copy, (with layers intact) ready to optimise.
There are different ways to reduce the size of your finished image and cropping is the first step - this removes extraneous areas not important to your image; for example, sky and extra scenery - or perhaps people.
This is another way to reduce the size of your image without too much loss of quality - depending on the resizing settings applied. Tip, after resizing an image, apply the Sharpen filter (once).
3/ Jpegs Or Gifs
After you have Cropped or Resized, (or both), your text/photograph, the final step is to save your images as Jpegs or Gifs.
The following gradient squares are both 100 Pixels X 100 Pixels, however the
Jpeg is 873 Bytes
And the Non Transparent Gif is 2,603 Bytes - that is a big difference in terms of image size and subsequent download/sending speed - and loss of quality is minimum.
Hover your cursor over the following rainbow images to find out what they represent.
If, however, you are creating flat plain text, the following Jpeg is 3.90 Kbytes
And the Gif is 2.74 Kilobytes - which is not hugely different, and the quality is similar.
If you create coloured text, then add an inner bevel - and drop shadow, you will notice the following file size.
Jpeg = 3.52 Kbytes
Gif = 5.29 Kbytes
The difference in file size is slightly increased, therefore for a smaller file size without loss of quality, utilise Jpeg.
Remember! You may not think there is a huge difference, and saving a few Kbytes is pointless - however if you have lots of navigation buttons, or graphics, they will accumulate, and the total file size for your page may be too large.
If you are optimising a photograph, Jpegs create a smaller file size, with better image quality, (depending on the compression quality you select). This Jpeg of Sacha is 13.3 Kbytes.
And the Gif is 68.9 - this is a marked difference when you are sending it via e-mail, or uploading to your web site - think of the loading time for people with dial-up modems - or slow broadband connections.
You should now have a better understanding of the importance of optimising your images, and remember, images will behave differently, and to achieve the best balance of quality V’s download/sending speed, you have to experiment.
Finally, Jpegs format is 24-bit colour and has information for up to 16.7 million colours, and Gifs are anything up to 8-bit (256 colour) - although you can reduce the number of colours for Gifs, if desired.
Top of Page
Photoshop format (PSD) is the default file format and the only format, besides the Large Document Format (PSB), that supports most Photoshop features.
When saving a PSD, you can set a preference to maximise file compatibility. This saves a composite version of a layered image in the file so it can be read by other applications, including previous versions of Photoshop. It also maintains the appearance of blended layers in the future.
In Photoshop, 16 bits per channel and high dynamic range 32 Bits per channel images can be saved as PSD files. Photoshop files also support layers and alpha channel selections.
Joint Photo Exports Group (Jpegs)
When publishing photographs to your web site, or indeed, sending them by e-mail, after they have been resized, they need to be compressed to enable quick page-loading.
Choose a photograph and open it in Photoshop, as it will usually be too large in area to send by E-mail; (especially if it is a digital photograph - the bigger megapixels your camera supports the larger your (raw) files will be) - or to publish on your web site, it has to be reduced. From the top menu, choose Image (then) Image Size - and resize it to approximately 6” X 6” or smaller - the smaller the better, experiment with the size.
From the top menu, choose File then Save for Web.
You are looking to save your images as a Jpeg, therefore change the tab to Jpeg.
In addition, I have clicked Very High (above), and this increases the files size,
therefore, experiment with this tab - your aim is to create the smallest file size, with the best quality image
Jpegs - Points to remember
1/ Jpegs support 16.7 million colours, therefore, they are the only choice for compressing photographs.
2/ Jpegs are not suited for compressing text, as the edges will be faded out, thereby losing their crispness.
3/ Jpegs is a “Lossy” compression, meaning every time you open your image to work with the photograph will suffer irreversible loss of quality. Quality will also be compromised, even when the lowest compression quality - Maximum, is chosen.
4/ To prevent loss of quality, until you have finished working on your photograph, save it as a PSD (Photoshop) file.
5/ Jpegs do not support layers.
Png files were developed as a patent-free alternative to Gif, Portable Network Graphics (Png) format is used for loss less compression and for display of images on the web. Unlike Gif, Png supports 24 bit images and produces background transparency without jagged edges; however, some web browsers do not support Png images. Png format supports RGB, Indexed Colour, Greyscale, and Bit map mode images without alpha channels. Png preserves transparency in grayscale and RGB images.
Wendi E M Scarth. Top of Page.