Summary (Details Below):
How to decrease file size so images load faster:
It's amazing how many web pages (or other sites with photograph's) contain images that have NOT been optimized for the WEB.
One reason is that people do not understand that a digital camera and/or scanner - along with the fancy graphics programs (such as Paint Shop Pro and Photoshop) have default settings intended for a printer. Now if people would just 'break' pictures into two classes:
BTW: Here are some web page optimizing tips for Photoshop.
The good news is that most people do NOT need the power of the expensive programs to optimize photograph's for the web.
There are freeware programs such as ( Irfanview) that do a much better job of compressing a .jpg image for the web. This freeware program has the standard tools that help decrease the file size. And it has an excellent side by side comparison view when using 'gamma correction' or other enhancements. Allowing a quick 'fix' for those dark pictures (which are so typical of a digital camera and a scanner)
In most cases, the only required change will be to load the original image. Then Use 'save as' to give the file a new name (and improve compression at same time). The freeware program (Irfanview) has default settings that do a 'fair' job of .jpg compression while maintaining WEB Quality.
Addendum / Footnote: The default quality setting is usually 80% for Irfanview; however, 70% or 75% quality still yields excellent WEB Quality. When using the program for the first time, just use the 'save' or 'save as' option. Then click on the 'option' button on the lower right. This displays the 'quality' setting that can be changed (again 70-75% will normally yield a quality higher than the best monitors on the market).
If using another graphics program, find the instructions on reducing the quality because most graphics programs are set at high quality (resolution) for printers (not monitors).
Some typical guide lines for optimizing images are shown below. These values are used by the professional webmasters (the code / layout people) that work on big business sites. In most cases, they will use the small to medium size images.
|Physical Size||Width x Height||File Size|
|Extremely Large||1200 x 900||80k to 100k|
|Very Large||800 x 600||60k to 80k|
|Large||640 x 480||50k to 60k|
|Medium to Large||400 x ???||25k to 50k|
|Small to Medium||300 x ???||10k to 25k|
These are typical but will vary depending on the number of colors and the resolution of the original image.
Instructions / examples are:
Open the file and then
Use Save as = with a new name
Check 'Save as type' (.jpg)
If the image is a large physical size,
Use 'image' and 'resize/resample'
There are several size options just
BE SURE to check 'Preserve aspect ratio'
Otherwise the image may be distorted
If there are 'dead' areas, it's best to
use your mouse to
select (draw box) around the
area to save / keep
Then 'edit' 'crop'
the image to remove all
area around the edges / top
If your digital photo is 'dark', use
the Enhance colors section
for a 'fast' fix.
Normally, the gamma correction
will be sufficient
But in any case, it's a
side x side comparison
For more information about optimizing for the web, check out digital camera or scanner tips = [ Scanner Tips]
Or if there are a lot of images, it's nice to make a page of thumbnails that link to the larger images = [ How to Make Thumbnails]