SUCCESSFUL WEB PAGES

Photo Optimization Examples
 
Please be patient, as most these photo examples show how not to use graphics.  The page may take several minutes  to finish loading.
 
 
Once this page finishes loading, scroll down the page and take a look over the pictures.  The photos all look the same, don't they?  They aren't.
 
The sizes of the pictures range from 4K to 150K!  Sizing and optimizing your web page graphics appropriately makes an incredible difference in how fast your web page loads.  This is especially important for users on slow Internet connections such as modems.  It's also important for you as the owner of a web page, because properly optimized graphics save you money.  How?  Smaller graphics mean less disk storage space, less bandwidth required for disk I/O (input/output) and less network bandwidth.  These are all things you (or your company) pay for.
 
 
The top photo shows the correct method to use graphics on a web page.  There are two important aspects used:  Resizing, and Optimization.
 
  1. The photo displayed on the page has been saved to a file that was reduced in size (height and width) to the exact display dimensions. (Resizing).
     
  2. The photo displayed on the page has been saved to a file at a quality level (compression) to greatly reduce the file size yet still look good. (Optimization).
 

BEST PERFORMANCE - THUMBNAIL 4 KB
 

 

 (CLICK ON PHOTO TO SHOW ENLARGED PICTURE)

THIS SHOWS WHAT IS GENERALLY CONSIDERED TO BE THE BEST WAY TO DISPLAY GRAPHICS.  A VERY SMALL THUMBNAIL IS SHOWN ON THE PAGE.  IF THE USER WANTS A CLOSER LOOK, THEY CAN CLICK ON IT TO TAKE A LOOK AT A LARGER VERSION.  THE LARGER VERSION HAS BEEN SIZED AND OPTIMIZED APPROPRIATELY AS WELL.

  
 

TARGET SIZE AND OPTIMIZATION ONLY 8 KB!

  

RESIZED AND OPTIMIZED  24 KB
 


(CLICK ON PHOTO TO SHOW ACTUAL PICTURE)

REDUCED IN SIZE TO 300 PIXELS WIDE AND SAVED WITH 50% JPG COMPRESSION.   UNLESS YOU PLAN TO HAVE A GRAPHIC OR PHOTO "CLICKABLE" TO SHOW A LARGER VERSION, THIS IS HOW YOU SHOULD SIZE AND OPTIMIZE YOUR GRAPHICS ON WEB PAGES:  RESIZE TO THE SIZE SHOWN ON THE PAGE, AND COMPRESS THE GRAPHIC AS MUCH AS POSSIBLE.

  


 CLICK ON PHOTO TO SHOW ACTUAL PICTURE)

REDUCED IN SIZE TO 640 PIXELS WIDE AND SAVED WITH 50% JPG COMPRESSION.  WHAT IS SHOWN IS A FAIRLY COMMON MISTAKE, INCORRECTLY MAKING A "THUMBNAIL".   AS YOU CAN SEE WHEN YOU CLICK ON THE PICTURE, YOU GET A LARGER VERSION.  HOWEVER, THE MISTAKE HERE IS THAT THE "THUMBNAIL"  PHOTO DISPLAYED ON THIS PAGE SHOULD BE THE 8K PICTURE.  WHAT IS DONE HERE IS SIMPLY HTML SIZING USING THE <IMG> "WIDTH" AND "HEIGHT" PARAMETERS.  THIS MISTAKE INCREASES PAGE LOAD TIME SIGNIFICANTLY, ESPECIALLY WHEN MULTIPLE PHOTOS ARE USED. 
 

NO RESIZE / OPTIMIZED  53 KB

  

RESIZED / NOT OPTIMIZED  104 KB
 


(CLICK ON PHOTO TO SHOW ACTUAL PICTURE)

MANY DIGITAL CAMERAS SAVE PICTURES AT A DEFAULT RESOLUTION OF 1024X768.  THIS LARGE SIZE IS SHOWN IF YOU LOOK AT THIS ACTUAL PICTURE.  IT IS COMPRESSED, WITH 50% JPG COMPRESSION.  MANY MAKE THE MISTAKE OF STOPPING HERE WITH SIZING AND OPTIMIZATION.  THE IMPACT IS A FILE LOADING TIME OVER 6 TIMES WHAT IS ACTUALLY NECESSARY!  BECAUSE THE LINKED PICTURE IS SO LARGE, THIS TENDS TO MAKE IT DIFFICULT FOR PEOPLE TO VIEW THE ACTUAL PICTURE.  NEWER VERSIONS OF BROWSERS TRY TO COMPENSATE, AND AUTOSIZE THE VIEWED "LARGER" PHOTO.

 


(CLICK ON PHOTO TO SHOW ACTUAL PICTURE)

REDUCED IN SIZE TO 640 PIXELS WIDE AND SAVED WITH NO ADDITIONAL COMPRESSION.  UNFORTUNATELY, THIS IS A COMMON MISTAKE.   THE IMPACT IS A FILE LOADING TIME OVER 12 TIMES WHAT IS ACTUALLY NECESSARY!
     
     
 
So, what's the lesson?  Always resize and optimize your graphics to the dimensions and quality you want to show on your web page.  Why? Time and money.

Even if you use a web editor program that automatically inserts graphics and creates "thumbnails", it's a good idea to go back and look at the graphics to see if you can reduce the size even more!
 

Click here to go back


 

Copyright (c) 2002, Keith Turbyfill.  All rights reserved.