Photo Optimization in your website design

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization.

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.

Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back.

Computer monitors can only display images at 72dpi (dots per inch). So the first step in photo optimization is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load.

Most graphic files contain information about the color palette of the image. This information is usually unnecessary for displaying on the web. Many graphic programs included the ability to “Save for the web”. This option discards all of the unnecessary information in the file without any loss of picture quality.

Another method that appears to speed up load time is to use either the GIF or PNG interlaced or the JPEG progressive property. Both of these properties allow the picture to load gradually as first a blurry image that becomes sharper and clearer. In reality the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster the site visitor.

Width and Height IMG Attributes

The HTML tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. If you don’t put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page.

How Many Images should you use?

Some web designers use images for everything. While it may look good, it will definitely slow down the speed of the page loading. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50% of the download time.

Using fewer images will speed download time and just may keep a visitor from bailing through impatience.

Photo Quality

Photo quality is determined by the clarity, color purity and detail of a photo. Use a graphic editor to remove noise and other unwanted features. Most editors allow you to correct red-eye and sharpen edges to improve clarity.

Professional editors like Fireworks or Photoshop will let you change the background, adjust the color levels and do almost anything else you want to do to the photo.

You can also use a thumbnail on the webpage that links to a larger and higher resolution version of the image so that people who want to can view it.

Photo Optimization Guidelines

The following suggestions will allow you to optimize your photos for fast download times without sacrificing picture quality:

Change the resolution of all images to 72dpi.
Convert graphic text into stylized text.
Crop the images to the actual size needed.
Minimize color depth when it’s not necessary for quality.
Specify the actual width and height of all images.
Use thumbnails where appropriate.



Bottom Line – Graphics should enhance the content of a web page except in that rare occurrence where the images are the content. In either case, you need to optimize photos and other graphic files to allow for the fastest downloading time possible for the web page otherwise you risk losing the visitor forever.

What to Include in Your Web Design Portfolio

A portfolio should include examples of your best work, the work you are proud of, and the work that best demonstrates your skills. But Web designers and Web developers have special needs for their portfolios - especially if you want to show off your programming, Flash, or dynamic HTML skills. So the first step in deciding what should go in your portfolio is to decide how you're going to maintain your portfolio:

Print or hard copy
This is the traditional form of a portfolio. If you are doing graphic design as well as Web design, many employers and clients will expect to see hard copies of your portfolio. Having a hard copy portfolio is also helpful for in-person interviews, you can bring it with you and display your work right away.

Online
Most Web design portfolios are online. If you do a lot of programming, Flash, or dynamic HTML, an online portfolio is the only way you can showcase your skills so that employers and clients can see it in action.

Always Use Only Your Best Work

If you have a lot of items to choose from, choose at most 5 to 10 items to put in your portfolio. It can be very tempting to put everything you've done or even everything you like a lot, but the reality is that nobody is going to look at the pieces beyond 5 to 10. More than that and you risk the client or employer getting bored with the portfolio.

Don't use anything you're not happy with, even if the client was pleased. If you have reservations about a project or wanted to make changes that were not approved by the client, those qualms will be apparent when you discuss it with new clients. You want to use items that you are excited about, that make you happy, and that show off. This is not a time to be modest.

What to Include in a Web Design Portfolio

1) Complete websites

Whenever possible, you should include a copy of the complete website in your online portfolio. Make a copy of the files and place them on your own Web server. You never know when a client is going to change the site, so pointing to their website is risky, unless you still work for them. Always get permission. I recommend having a clause in your contracts that you can store a copy of your work on your personal server for use in your portfolio.

2) Screen shots of Web pages

If you can't get the complete site for your portfolio, be sure to take a screen shot of your work once it's live. The screen shot should include the entire browser window, including the site URL. This shows your clients that the site was live.

3) High resolution images

If you did graphic design work you should save high resolution versions of your images for your portfolio. Remember that even if the image is only used on the Web, if you have a print copy of your portfolio, high resolution images look better than images at Web resolution.