Recipes > Image Optimization Tutorial

You are in:  Forums / Recipes / Image Optimization Tutorial
Locked
AndreiEDM
Posted at 2012-08-14 22:04:27 (671 wks ago)



Posts: 97
Location: unknown


mage n Photo Optimizing Tips
To make web ready photo - images

Summary (Details Below):
How to decrease file size so images load faster:

1. The Best method to decrease file size for a WEB image is to decrease the quality. This does NOT mean the image will not look good on a computer monitor. Digitized images are normally at a much higher quality (resolution / dots per inch) than a monitor can display. This step alone will normally reduce the file size to 1/5 of the original. Physical size will not change (Avoid resize until final step)
2. The Second best method (optional) is to 'crop' off any 'dead' area. For example, center the subject in the picture by cropping the borders.
3. Using 'resize' to reduce file size is NOT very effective. (usually no more than 1/2 of the original size - even if you take the viewing size below 320 x 240  Resize should be used to obtain the 'physical' size you desire i.e resizing - Used alone results in an image that is not really optimized very well.

The Details n How To

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:

1. Copy for the printer
2. Copy for the web

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
Open the Image n Then Use SAVE AS to give it new name. May be all you need!

Use Save as = with a new name
Save AS
Check 'Save as type' (.jpg)
Under options
check quality



If the image is a large physical size,
Use 'image' and 'resize/resample'
Use Image then Resize/Resample

There are several size options just
Make Sure to Check PRESERVE ASPECT RATIO
BE SURE to check 'Preserve aspect ratio'
Otherwise the image may be distorted

If there are 'dead' areas, it's best to
Use Mouse to Select Area to Keep
use your mouse to
select (draw box) around the
area to save / keep

Then 'edit' 'crop'
Clicking on Crop will Keep the Selected Area
the image to remove all
area around the edges / top

If your digital photo is 'dark', use
Use Enhance Colors To Make Dark Image Easy to View
the Enhance colors section
for a 'fast' fix.
Normally, the gamma correction
Use the Side x Side View n Gamma Correction for Quick Fix
will be sufficient
But in any case, it's a
side x side comparison

P.S.
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



FORUMS_REPORT_POST FORUMS_GOTO_TOP_PAGE
0 0  
RemiXer
Posted at 2012-09-23 12:33:58 (665 wks ago)



Posts: 176
Location: unknown


Topic Locked by [url=/userdetails.php?id=12839697]DonLucenzo[/url]
Reason: Util.

FORUMS_REPORT_POST FORUMS_GOTO_TOP_PAGE
0 0  

<< Prev  1   Next >>

Locked
FORUMS_TOPIC_LOCKED

Online Since 10.09.2011 - 2025 | XTR: Android APP | Donate: BTC ETH CRYPTO
Ora:(
  • :
  • :
)