Learn to Use an Image Editor – Or Hire a Pro
Of course Adobe Photoshop is the image editor of choice. But the professional version for your computer is quite expensive.
There are alternatives:
- Adobe Creative Cloud
- Pay by the month and use the online version
- Use Adobe Photoshop Elements, the $80 version of Photoshop
- Photoshop Elements does most of what the expensive version do
- Use the FREE GIMP image editor
Choose the Best Image File Format
There are several digital file formats. Each has its own unique strengths and weaknesses.
The best for websites are thos which can be compressed in file size:
- .JPG or .JPEG [pronounced “jay-peg”]
- .PNG [pronounced by spelling it out]
- .GIF [pronounced like “jif” as in “jiffy”]
Why You Need Compression
Download speed is critical to any web page. Visitors will click away from a slow loading web page after a few seconds. Google will lower your page quality score if page loads take more than a few seconds. Google doesn’t divulge their time limit, but most experts guess at 3 to 5 seconds max to download your page.
Download speeds on the internet are limited by current connection technologies and by the economics of Internet subscriptions. Therefore, all the elements which make up your web pages must be as small (in file size) as possible. It happens that digital images are naturally huge in file size.
Test Your Page Load Speed
There are several websites and methods for testing your page load speeds. I like to use Pingdom Tools. Be sure to use the “Settings” to specify a city. Note the bars in the bar graph test results. Often the longest bars (slowest loads) are for image files. Each bar lists the file size too. My home page loads in about 2.2 seconds. And I see now that I can improve tht by removing one plugin (which wasn’t all that useful anyway).
A digital image is just a huge list of “pixels”, with each pixel containing 8 bits of information (256 levels) for each of the Red, Green and Blue hues and sometimes also 8 bits more for transparency. To look sharp and to allow a smooth transition for continuous tonal areas (think subtle blue tones in a sky), many thousands of pixels are required in these 24 bit or 32 bit image files. For example a high quality image from your digital camera will probably be 2,000 to 4,000 pixels wide. The file size will likely be in the Millions of bytes range.
For fast downloading inside web pages, image files must be kept to 30,000 (30 KB) bytes ideally and less than 60,000 (60 KB) bytes practically speaking.
Avoid These Common Website Image Errors
Use the best image file format for the type of image and its purpose:
- JPG is best for continuous-tone images, like photos
- Best compression without color loss
- Smallest file sizes
- GIF is best for discrete color areas, like maps or text banners
- High compression possible
- Can even be animated with free software
- TIF or BMP are not for web use, but to store images at the highest quality
- Also use these to exchange images with others at no quality loss
- Keep your originals in TIF, BMP or PSD formats for future processing
- TIFF is available on both Mac and Windows computers
- BMP is only available on Windows
- PSD is the native file format for Adobe Photoshop, the most popular image editing program
- Digital cameras automatically do some JPG compression
- But by default they output large, high-quality jpeg files
- Some digital cameras can also do RAW images, direct from their light sensors
Avoid over-compression, but compress your images to the max:
- To compress GIF or PNG images, you must limit their colors
- Too few colors look poor and unprofessional
- Crop images to focus attention on the most important visual information:
- Don’t waste bandwidth and meaning on redundant or useless visual information
Here is a table on Website Image Formats
To your online success!
Author: jim coe