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 GIMP (GNU) tutorial explains a little about your saving options, and why one option will suit your needs better than another.
Table Of Contents
GIMP XCF Files
Save Or Save As?
JPEG’s Verses GIF?
Save Files & Images
GIFs: Points To Remember
New Additions To GIMP 2.8
JPEGs: Points To Remember
Understand Image Resolution
Understanding Colour Models
Resize Images Using The Set Image Canvas Size Dialogue Box
Save (Export) Images As JPEGs, GIFs, PNGs, Etc, (New To 2.8)
Fill A Transparent Layer With A Solid Colour, Pattern Or A Gradient
To Save A Transparent Image As A Transparent GIF And Blend It With Its Background
To save your work, from the top menu, choose File. And from subsequent drop-down list, either choose Save - or Save as.
Save As Or Save
It’s 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.
From the Save Image dialogue box, (if necessary); click open the Browse for other folders menu by clicking the tiny plus icon. And then navigate to a Folder of your choice - as illustrated by the Large Screen Capture Here.
Now, from the subsequent Save Image dialogue box, click the following (tiny) Select File Type (By Extension) tab to display GIMP’s File Extension choices.
GIMP’s File Type (Extension) List
Then left-click to highlight a File Type (Extension) of your choice. Now, type a name for your file into the Name box. And then (from the Save in Folder box); navigate to a Folder of your choice, and then click Save - as illustrated below.
Merge Layers Note
If the image you are saving has more than one Layer; then, depending on the File Type (Extension) you select; you may see the following Export File dialogue box. To continue, click Export. If you are saving your work as a JPEG or a GIF; GIMP will now Merge Visible your image’s Layers. If your Layered image is an animated GIF, then mark Save as animation, and then click Export.
Clicking the following Save tab, will save your image to a destination folder of your choice.
Save Images, For Example, As JPEGs, GIFs & PNGs etc. New To Version 2.8
By default, GIMP 2.8’s, Save As dialogue box automatically saves images as GIMP (XCF) Files only. If you want to save your image in any other file format, you must Export it. Therefore, to save your image as a GIF, JPEG or PNG, etc;- from GIMP’s top menu, choose File then choose Export.
Now, from the subsequent Export Image dialogue box, click the following (tiny) Select File Type (By Extension) tab (+ sign) to display GIMP’s File Extension choices.
Then scroll down the subsequent file extension drop-down menu, and select your choice by left-clicking it. And then finish by clicking Export, as illustrated below.
(Follow any final on-screen prompts to fully save your image).
A Brief Explanation Of Transparent GIFS
In my starry background example here. The text and yellow graphic were created and saved independently - and 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. The image below has therefore been optimised to be displayed against a black or a very dark background.
Therefore, if your website background, or e-mail, is cream, or a light colour - or a pattern, you would surround (stroke) your image with white or cream. Your graphic or text would then blend seamlessly - as illustrated below.
Save A Transparent Images As A Transparent GIF
The following mini tutorial demonstrates how to optimise a Transparent GIF so, after it has been uploaded to a website or a forum, it blends seamlessly with its background.
1/ Mini Tutorial
To begin, first remove the background from an image, or create text on a transparent (chessboard) background. Alternatively, to work along exactly, you are welcome to download my Transparent Cat And Dog XCF Gimp File Here. Unzip the file, and then open the image onto GIMP’s workspace. And then, apply a drop/perspective shadow to it, if you so wish.
2/ Important - Merge Visible Any Layers
It’s important to Merge Visible any Layers. Therefore, from the top menu, choose Image and then choose Merge Visible Layers. And from the subsequent Merge Layers dialogue box, click the Merge tab.
Now, it’s time to stroke your Transparent GIF with a Solid Colour. Stroking your Transparent GIF with a Solid Colour smoothes potential ragged edges. (If you don’t stroke your image, once saved; it’s edges will be unsightly and ragged - as demonstrated below).
First, set the Background Colour to a colour that closely matches (or is identical) to the website or forum background you will be uploading your Transparent GIF to. For example, if your website/forum background is Solid White - then change the Background Colour to Solid White. I am going to blend my Transparent Cat And Dog GIF with this page’s pink background colour, and I have therefore set the Background Colour to Pink - as illustrated below.
Now, from the top menu, choose Web and then choose Semi-Flatten. You will notice your image has now been stroked the Background Colour, which in this instance has been set to Pink.
Tip: Colour Picker Tool
Link Here to discover how to set the (Foreground) and the Background Colour to a Solid Colour of your choice.
If necessary, activate the left-side Toolbox’s Crop Tool.
Then left-click, and drag out a Crop Bounding Box around your image - as illustrated
below-left. And then tap your Return/Enter Key to commit the Crop. This removes extraneous canvas pixels, therefore reducing your image’s size.
Now, from the top menu, choose File then choose Save As. You will then see the following Save for Web dialogue box. Enter a name for your image into the Name box: and from the Save in folder tab, navigate to, and then select a Folder you would like to save your image to. Then open the File Type (Extension) list by clicking the tiny Select File Type (By Extension) tab - illustrated by the red arrow, below.
Then scroll down the File Type (Extension) list, and left-click to highlight GIF Image - and then click the Save tab - as illustrated below.
And from the subsequent Export File dialogue box, click Export.
Now, accept the default settings, and then click OK.
Congratulations, you have saved your Transparent GIF, and if you have optimised it correctly, it will blend with your designated background, seamlessly - as illustrated below.
GIFs - Important 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 websites 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 website - 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 website with lots of graphics that have not been correctly optimised, they may not wait for your website 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 JPEGs 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, images comprise 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/JPEG into GIMP to modify and re-save it, its quality will degrade. Therefore, save the original image as an GIMP XCF File first. This ensures you have a perfect backup copy, (with Layers intact) ready to optimise at a later date.
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, it’s good practise to apply the Sharpen filter (once).
3/ JPEGs Or GIFs
After you have Cropped or Resized, 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.
PSD (Photoshop) Files
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.
XCF GIMP Files (Save Images Here).
XCF, short for eXperimental Computing Facility, is the native image format of the GIMP image-editing program. It supports saving each layer, the current selection, channels, transparency, paths and guides. The image data saved are compressed only by a simple RLE algorithm, but GIMP supports compressed files, using either gzip or bzip2. The compressed files can be opened as normal image files. The XCF file format is mostly backward compatible. For example, GIMP 2.0 can save text in text layers while GIMP 1.2 can not. Text layers saved in GIMP 2.0 will open as ordinary image layers in GIMP 1.2. The use of XCF as a data interchange format is not recommended by the GIMP developers, since the format reflects the GIMP's internal data structures, and there may be minor format changes in future versions. The source code of GIMP itself (which is freely available) is the reference documentation of the format. Henning Makholm (see XCFTools below) has written a specification which has been adopted by the GIMP developers. In addition, a collaborative effort between the GIMP developers and Krita developers is underway to design a raster file format called OpenRaster, modelled on the OpenDocument format, for use in both applications in a future version. (Save Images).
Joint Photo Exports Group (JPEGs)
When publishing photographs to your website, or indeed, sending them by e-mail, after they have been resized, they need to be compressed to enable quick page-loading. Typically, a photograph will much 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 website, it has to be reduced. Generally speaking, the quickest way to reduce an image’s size is to reduce Width and Height dimensions. To so this, from the top menu , choose Image and then choose Canvas Size - and resize it according to your needs, then then click Resize.
JPEGs - Important 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 - 100%, is chosen.
4/ To prevent loss of quality, until you have finished working on your photograph, save it as a GIMP XCF 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.