Users dislike slow-loading web pages and we don't blame them. The #1 cause of slow pages is "fat" images being uploaded before taking them through the proper optimization steps.
Pictures taken with a digital camera are optimized for fine color printing, and can often exceed 2, 3, even 5 Megabytes (Mega Pixels). So they need to be optimized before uploading.
The process of OPTIMIZING is
NOT just resizing the display dimensions of a photo. You need to run the image through software that physically compresses the pixels of the file, resulting in a smaller file size. The image can be the same display size but will load much more efficiently, and with no loss of quality. Here's how:
BTW: This issue is not unique to TennisConnect (it applies to any web server). Fortunately there are a variety of good (and free) software application and online services to help you. Google "optimize images for the web" for more information, or choose one of these helpful tools:
www.webdeveloperjuice.com.
As with web pages and layout questions in general, this is another of those areas where you need to decide if you want to optimize your images yourself, or if your want an Authorized Service Provider to do this for you. This article will address an example of optimizing an image using www.picnik.com.
TIP: If you have decided to learn how to do this yourself, you may as well take just a little extra time and learn a few tips that will increase your satisfaction with the process.
- Here is a photo uploaded directly from a digital camera: Click for example (S L O W)
- Here is the same photo, un-optimized, but simply with the display dimensions "re-sized" and set to a width of 550 pixels. It is still a big slow file (2.5 MB), and now all the lines on the
court are jagged (check out the base line, side lines and alley lines):
- Now here is the same photo "optimized" (62 KB - 40 times more efficient) and saved at 550 pixels wide: (and note the base line, side line and alley lines)
-
The benefits to optimization are clear, but there is more that you can do to make this photo more interesting.
There is usually an area or section of the photo that would make a good image all by itself. You can "crop" sections of an image to create a new image resulting in better presentation ion your web site. Here are 2 examples:
Here's how to crop and optimize an image for the web:
Your digital camera probably came with software to help you "optimize photo's for the web". We cannot support all the software out there that does this, but we will provide an example using a free service from Picnik.com. Picnik is so popular it is embedded in Yahoo Mail and boasts hundreds of millions of users. Picnik.com is also integrated with PhotoBucket.com, making it the de-facto market leader for us.
Example using Picnik.com (free web based service acquired by Google 3/4/2010)
- Upload your photo to Picnik.com
-
Resize the image
-
Save under Save & Share - this runs the compression and downloads the file back to your computer. Accept the default compression and make sure you rename the file so you still have your original "source" files.
Other fun things you can do include
-
Crop the image
-
Resize it
-
Use "Create" to apply special effects and objects:
Related Articles:
Upload Images Documents or Flash
Upload Multiple images at one time
Article ID: 95, Created On: 1/18/2010, Modified: 8/20/2010