While the mass-market, “pre-canned” photo-hosting solutions are a great way for beginners to start sharing their bird photos on the internet, at some point you may decide that you’d really like to have more control over the presentation of your digital portfolio.   For example, you might be very picky about the layout of your digital “gallery”, in terms of the geometry or background colors of the web page, the way different images in a gallery (or even different galleries) are displayed relative to each other, or even just the resolution and scaling of the full-sized views of individual photos.  Artistically, it’s quite natural to want to control every aspect of the viewing experience enjoyed by your gallery’s visitors, and to the extent that you feel you have a unique and artistically satisfying “vision” for a given collection of images, it’s worthwhile putting in the effort to realize that vision for the viewer’s benefit.
    Although some photo-hosting sites do allow for some degree of customization of individual photographers’ web pages, you’ll typically have to upgrade to a “premium” (i.e., non-free) account in order to take advantage of those options.  In some cases, the range of options for predefined “page styles” may meet with your satisfaction, and if the associated hosting fee and other considerations (whether practical or artistic) are satisfactory, then you may indeed consider yourself lucky and decide on that particular solution.  Just keep in mind that not all media-hosting sites stay in business indefinitely, and even those that do survive over the long term may impose changes in account-holder agreements and/or limitations that you might eventually find unacceptable.



    The other option is to build your own web site from scratch, and while that may sound like a lot of work (which it is), most serious photographers seem to end up adopting this solution eventually.  Note that while this solution is not trivial to implement, it needn’t be expensive, and indeed it can be cheaper than using a pre-canned solution, in some cases.  In this section we’ll consider the main issues involved in the do-it-yourself route to online photo hosting.


16.2.1 Choosing a Hosting Company

The first thing you need to do is to pick a domain name.  This is the web address (“URL”) for your main web site.  Two popular options are to use something like “yourname.com” (i.e., “JaneDoe.com”, but with your name substituted in place of Jane Doe), or to coin a catchy site name and to use that.  For example, my personal web site (which I use for bird photography as well as other uses) is BillMajoros.com, while for my bird photography I chose the name ThirdBirdFromTheSun.com, since the phrase “Third Bird from the Sun” is catchy and therefore easy for people to remember.  Try to brainstorm a list of possible domain names, including both of the above types (i.e., those based on your name, and those based on a catchy bird-oriented or photography-oriented phrase).  You’ll then want to check which of these domain names are available (i.e., which haven’t already been taken by other people).  You can do this easily at any number of domain-registration sites; one reputable registrar is NetworkSolutions.com. 
    Note that you can use any of these domain “registration” sites to check for domain availability; just querying domain availability doesn’t cost anything, and you don’t have to register the site you want through the company that did the search for you (that is, you do need to register the site you want with some registrar, but it needn’t be the same company who did the search for you to determine availability).  Domain name registration typically costs in the $10 (US) range, give or take a few dollars, and it needs to be renewed every year (generally at a comparable price).
    In addition to selecting a domain name, you need to select a web hosting company.  This is the company that provides the actual storage space for your site, as well as the hardware and software that “serves” the site to browsers over the internet.  Hosting plans typically run $5 to $10 (US) per month, which is extremely reasonable considering that such plans typically provide far more space and bandwidth (monthly upload/download quota) than you’re ever likely to need for a bird photo website.  For example, as of this writing my current provider (IPOWER.com) offers unlimited disk space and unlimited bandwidth for $5.95/month for a 1-year commitment, or $6.95 for a monthy commitment.   These prices often change, however, so be sure to check the hosting company’s web site for current pricing.



    Once you’ve found an available domain name and a hosting package that you like, you can register the domain through your chosen registrar when purchasing their hosting plan.   They’ll typically charge you separately for the domain registration and the hosting plan; some hosting plans include one free domain registraiton, though yearly renewals of the domain name will incur an additional cost.  Note that registering your domain name through your hosting company is generally the best option; though you can certainly register the domain name through a different company, getting your hosting company to do the registration generally simplifies things, since the hosting company can internally coordinate the registration and IP/DNS pointing of the domain (don’t worry if you don’t know what that means).
    Apart from quota limits (i.e., how many gigabytes-worth of files you can store, and how many gigabytes can be transferred to viewers, per month), there are some other differences between hosting companies that you should be aware of.  The first is ease of use (for you, not your visitors).  Unless you happen to be a computer scientist like me—and possibly even if you are—it’s likely that you’ll want for your hosting company to provide an intuitive interface for common maintenance issues such as backups, domain/subdomain pointing, and access statistics.  The hosting company that I use provides a web-based “control panel” that provides some of these functions (see the figure below).



    Although graphical user interfaces like the one shown above can be useful for some tasks, the actual designing of web pages and uploading of photos to the host server is typically easier when done using other tools, as we’ll describe shortly.  I generally only use my host’s web-based interface when checking available disk space and bandwidth, collecting visitor statistics, or managing subdomains.  Regarding disk space, most hosting plans these days provide a ridiculously large amount of disk space, so it’s generally not an issue even if you plan to upload many, many thousands of photos; I have thousands of bird photos on my web site and they only take up about 6 gigabytes (GB) total.  So far I also haven’t had any issues with bandwidth—the amount of data that can be uploaded or downloaded per month—since photos resized for viewing on a web page are typically very small (~200 kilobytes on average, where 1000 kilobytes = 1 megabyte, and 1000 megabytes = 1 gigabyte) and bandwidth limits are typically very large (say, 250 GB per month).
    Most hosting companies will also provide a way for you to see your site’s monthly access satistics—i.e., how many people came to your site this month, how many web pages they viewed, how many images, and even which pages and images were accessed most.  This can be very useful if you’re thinking about trying to sell some of your photos, or to enter them into photo contests.  Just keep in mind that download statistics can be misleading: an image may be viewed more frequently than others simply because someone posted a link to it somewhere on the internet, and many other people followed that link; that doesn’t necessarily mean that that particular photo is the one people like most in your portfolio.


    One very important consideration when choosing a hosting company is the reliability of that company’s service.  If the company’s servers often crash, then you may find that your web site is often inaccessible to people who want to view it.  When the servers crash, it may be hours or even days before your web site is visible again.  Even if the servers don’t crash very often, they may be overloaded by too much traffic, resulting in web pages that load very slowly.  Internet users these days have little patience for slow web servers, so if you get stuck on a slow server, you may find that people spend very little time at your site.  I’ve had a number of cases in which I couldn’t upload a large number of photos because the servers kept dropping the connection after the first few photos were sent, and I was told by customer support that the server was simply overburdened by other users who shared the server I was on.
    A related issue is the competence of the hosting company’s technical support staff.  Although the hosting company that I use claims to have exceptionally competent staff (“experts in the industry” is what their web site proclaims), I can say with absolute certainty that many of them are substantially less competent with a computer than my 13 year-old labrador retriever.  Many of the customer support staff are located overseas in call-support centers where they don’t even have access to the servers or the engineers who keep the systems running.  I strongly recommend spending some time browsing around in internet forums, reading comments from actual users of various hosting companies, to find out which companies have the highest server “up-time” and the most competent support staff.


16.2.2 Creating HTML Pages

Web pages on the internet are encoded in a computer language called HTML.  You don’t really need to know this language in order to create web pages, though it doesn’t hurt to know a little bit about HTML if you’re thinking of building your own web site from scratch.  Later in this section we’ll cover some of the basics of HTML.
    Today, most web pages are created not by writing HTML directly, but by using a visual web page editor that writes the HTML for you.  I like the Composer program that comes with the Mozilla package, which is completely free (see the Seamonkey product from mozilla.org).  A screenshot of Mozilla’s composer program is shown below; this program is available for most common operating systems and platforms (including Mac and Windows).  Other programs for composing web pages are available, such as Microsoft’s “Expression” program; some versions of Microsoft Word also support web-page editing.


    In the example shown above, I’ve created a web page visually, in Mozilla Composer, by creating several nested tables (indicated by the red dotted lines) and populating the cells of those tables with Images And Words.  As shown in the figure, you can easily set various properties of tables and their cells, such as the spacing, alignment, and color.  None of this requires knowledge of HTML.  For the images, you can simply drag-and-drop them (in JPEG format) from a folder on your computer into the web page; you can then type in the accompanying text and adjust the font size and color via visual controls in the Composer program.
    If you do happen to know a bit about HTML (or don’t mind learning), Composer also allows you to edit the HTML directly, as shown below.  In this case I’ve designed a web page visually using the user interface of Composer (i.e., without actually writing any HTML by hand), and then clicked on the “HTML Source” tab, which causes Composer to show the HTML that it has generated for the page; you can then edit the HTML directly, if you like.  The HTML then needs to be saved into a file on your computer and then uploaded to your hosting company’s server; note that any photos displayed on the page have to be uploaded separately, since they’re not actually embedded in the HTML file (the HTML source code simply “points” to the file by specifying its location).


    A complete tutorial on HTML programming is obviously beyond the scope of this book; we’ll just briefly touch on some of its features.  First, an HTML file consists of both text and markup; the former is simply any text that you want to be displayed on the web page, while the latter consists of special tags that control the layout of the page and can also be used to display photos.  Each tag is delimited by greater-than and less-than symbols, as in <h1> or <p>.  Most tags come in pairs, such as <b> and </b>, in which case the <b> tag begins an HTML element and the </b> ends that element.  Any text sandwiched between a <b> and </b> will be displayed in bold font, while text between an <i> and an </i> will be displayed in italics.  Top-level headings can be specified using <h1>...</h1>, slightly smaller headings by <h2>...</h2>, etc.  Images can be displayed using the tag <img src=“filename.jpg”>, which doesn’t have an end tag (i.e., no </img>).  To create a link to another web page, you can use the <a href=“other_page.html”> tag, which does require an </a> tag; the text between the <a...> and </a> tags will comprise the link to the other page.  If you’re interested in learning HTML, there are any number of tutorials available on the internet; a good place to start is the Wikipedia entry on HTML, which lists several tutorial links at the bottom of the page.
    If you happen to be a computer programmer, then you’ve no doubt considered the possibility of writing your own custom software for generating web pages to display your photo albums.  I use the programming language Perl for this purpose; Perl is a popular scripting language available on virtually all UNIX-based systems (including Mac OS X, which is built on UNIX), as well as some others.  I have one Perl script, for example, which reads a directory containing bird photos and then generates a web page containing links to those images.  This script is shown below (in part), in the UNIX editor emacs:


    I have separate Perl scripts for generating image thumbnails, for making what I call frame files, and for converting image gamma settings between the native Windows and Mac settings.  Thumbnails are the small, icon-sized versions of photos that serve as place-holders on the web page; when a user clicks on a thumbnail, the larger version of the photo would then be displayed.  When displaying that larger version, I link to a special frame file rather than linking directly to the image itself.  The frame file is simply an empty HTML file that contains nothing but the full-size image; I prefer to do this because on some systems it will prevent the users’s browser from resizing the image to fit inside the user’s browser window, which can sometimes degrade image quality due to the browser’s crude image resizing algorithm.  The issue of gamma conversion will be discussed in section 16.2.4.





16.2.3 Site Organization

Once your portfolio reaches a certain size, you’ll want to begin organizing it into a coherent structure that viewers will find convenient to navigate.  There are a number of different ways to do this.  For example, some birders organize their photos by species, while others list their photo albums by date.  I don’t favor the by-species option, since it tends to result in individual photo albums that have lots of very similar-looking photos, resulting in some degree of monotony.  Instead, I organize my online photos into two main groups: a “trophy case” of my hundred or so all-time best photos, and a separate index of photo albums organized by date (typically according to individual photography trips). 



    In addition to an index of photo albums, you might consider having a top-level menu that offers links to pages containing contact information, a personal biography, equipment info, and any merchandise (such as framed prints or canvases) that you might have for sale.  A biography can be useful for giving your viewers a “mental hook” for them to associate with your work (i.e., helping them to remember your work by remembering something about you).  Including equipment information can help to increase traffic to your site from users with similar equipment who perform an internet search based on camera or lens models.  In terms of merchandise, if you’ve set up a print-on-demand account with a company such as ImageKind or SmugMug (see section 14.4), then you can simply link directly to that page from your main web site.
    Another thing I recommend, to increase public interest in your photo albums, is to invest the time to annotate your photography with some meaningful text.  If you group your photos together according to some theme—such as location, or species—you can then add some narrative describing how you obtained the photos, or describing the species pictured, or the site where they were photographed.  Such text can be enormously useful in attracting viewers to your site, because it will be indexable by search engines, and will also provide an additional reason for some viewers to visit your site.  In fact, I believe the more text you add to your photo albums, the greater your chances of attracting significant attention to your photography.  The text can consist of anything from artistic essays or poetry to blogs and diaries to reviews of equipment and/or birding sites.  Literally anything that might attract attention to your photo album is fair game, when it comes to attracting the denizens of the internet to your site.  In a deeper vein, textual annotations increase the intellectual value of your site by increasing the information content and turning what would normally be just a random collection of JPG files into a living, breathing, real person’s narrative about life in the company of wild birds (or whatever you decide to write about).
    Note that once you’ve set up a hosting account for your bird photos, you’ll typically have lots of space left over on your account for hosting other web pages; these other pages can even have their own domain names associated with them, since your hosting provider can point those domain names at subdirectories of your hosting account.  For example, this book, which has as its domain name digitalbirdphotography.com, is hosted on the same account as my personal web page, billmajoros.com.  Also on this same account is the domain for my biotechnology textbook (at geneprediction.org/book), the domain for a DNA analysis software package of mine (genezilla.org), and of course my bird photos (thirdbirdfromthesun.com, which is currently aliased as birdpixels.com).


16.2.4 Platform Issues: PC, Mac, and Gamma

It’s an unfortunate fact that images processed on one platform (such as Windows) can appear quite different when viewed on another system (such as on an earlier-generation Apple Macintosh).   In particular, images processed on an older Macintosh will tend to look unnaturally dark when viewed in Windows, while images processed on a Windows computer will tend to look “washed out” (i.e., too light) when viewed on the older Mac.  The reason for this is something called gamma, which involves issues related to both hardware and software.
    Mathematically, the gamma problem takes the form of a power law relating image intensity to applied voltage:


What this equation states is that the pixel intensity (I), as seen on a computer monitor, is equal to the pixel value (V) encoded in the image file (0 to 255, rescaled to the range 0 to 1), raised to the power gamma (γ).  This nonlinear relationship between encoded pixel value and rendered brightness is a consequence of the underlying physics involved in the use of cathode ray tubes (CRT’s—the predecessors of modern LCD screens) in rendering images; to maintain backward compatibility, modern LCD screens (also called TFT displays) typically emulate the gamma characteristics of traditional CRT displays.  An example gamma function is illustrated below.  For Windows machines, the value of gamma is typically 2.2 or 2.5, while for Mac systems (prior to OS X 10.6, “Snow Leopard”), the value would be 1.8.

    Because of the nonlinearity of the gamma function (i.e., the fact that it’s not a straight line), images captured with a linear device such as a DSLR sensor won’t render faithfully on a display imposing such a nonlinear transform.  Furthermore, because different display devices (i.e., CRT’s or LCD’s set up for different computer platforms) may use a different gamma value in their transform, the effect can differ substantially between systems.
    The solution to this problem is to impose a gamma correction, by applying the inverse gamma transform to the pixel values before sending those values to the computer’s monitor (which will then apply its own gamma transform).  The combined effect of the inverse gamma transform and the forward gamma transform is that the displayed pixel intensities should (ideally) scale linearly with the encoded pixel values in the original image file, as desired.  The inverse gamma transform is shown below:


You can apply this transform easily using the “convert -gamma” command in the free, open-source software package ImageMagick.  ImageMagick is available for all major operating systems, including Windows and Mac OS X.  Photoshop also has a gamma correction function.
     Unfortunately, not only can the value of gamma vary between systems, but also some systems perform their own gamma correction prior to sending the image to the monitor for display; this complicates any strategy for cross-platform gamma correction of bird photos.  The strategy I’ve adopted is based on an empirical approach.  All of my bird photos are processed on a Mac laptop.  Because most web viewers use Windows, my bird photos would appear unnaturally dark on their screens.  So I process all of my photos by applying the inverse gamma transform shown above (via ImageMagick), with gamma set to 1.38888.  I determined this value of gamma by trying different values and viewing the resulting gamma-corrected images on several Windows computers (including both laptops and desktops with LCD monitors); the value of 1.38888 was the one which resulted in Windows images that most faithfully matched the originals when viewed on my Mac.  Note that this gamma value (1.38888) isn’t necessarily the optimal value for correcting your own Mac-based images, since the ideal value will be affected by the brightness of your native computer’s screen.  Furthermore, Macs running the newest version of OS X (version 10.6, also known as Snow Leopard) now apply the same gamma transform as Windows machines, so that an explicit gamma correction may not need to be applied to your bird photos when posting them to Windows-dominated internet venues.
    Systems other than Windows and Mac do exist, most notably Linux (and other flavors of UNIX), though at present they seem to represent a very small percentage of the internet-browsing population.  Many Linux-based systems utilize the same gamma transform as Windows, so if you’re processing images on a Linux machine, you may not need to apply any explicit gamma correction before posting your images on the internet.  My personal solution to the gamma issue is to ask users which system they’re using when they enter my web site, and to then direct their web browser to a gamma-corrected version of my site, as per their system.  This requires maintaining two parallel web sites (one calibrated to Windows machines and one calibrated for Macs), but in practice this hasn’t been much more than a minor inconvenience.  (Note that if the figures in this book appear unnaturally light or dark to you, then you may be viewing the wrong version for your operating system). 



    Note that a gamma correction factor can sometimes be specified system-wide in your operating system’s monitor profile, or in your image processing software.  Also, web browsers perform their own gamma correction, which to some degree worsens the problem rather than fixing it.  Fortunately, the convergence of Mac and Windows gamma values starting with OS X 10.6 should render the problem increasingly irrelevant in the future.
    A somewhat related issue is the use of special browser plug-ins, such as the popular Flash plug-in.  Savvy web developers like to use flashy plug-ins because they look sophisticated, but I try to avoid using anything other than basic HTML, because plug-ins often aren’t available on mobile devices such as cell phones and tablets.


16.2.5 Monitor Calibration Issues

Another unfortunate fact is that not every internet user is viewing your web site on a properly calibrated display.  You should, however, ensure that your monitor is properly calibrated, so that others viewing your photos on a calibrated display will see more or less what you see when you view your own web site.  Also, postprocessing your photos on a calibrated monitor will minimized the expected bias seen by the average viewer using commodity equipment.  The calibration key below can be used as a quick check as to whether your monitor is out of calibration.  Section 14.1.2 discusses calibration techniques.




16.2.6 Making Web Slideshows

Making a slideshow on the web is simple.  The way I do it is to have a separate HTML page for each image, and to link each HTML page to the next.  The code to do this is:

<html>
   <body style="background-color: rgb(0, 0, 0)">
      <center>
         <a href="next_page.html">
            <img src="this_image.jpg">
         </a>
      </center>
   </body>
</html>

The rgb(0,0,0) sets the page color to black, the <center> tag causes the image to be centered horizontally on the screen, the <img src...> specifies the image to be displayed on the current page, and the <a href...> tells the system that clicking on the image should cause the next page (with the next image) to be loaded into the browser.  Writing a computer program to automatically generate these pages for a set of images in a directory is simple.  It’s a good idea to provide some instructions to the user on the very first page, so s/he knows how to get from one slide to the next, as illustrated below.




16.2.7 Avoiding Copyright Infringement

It’s worth mentioning very briefly the issue of copyright.  There are two issues: making sure you don’t violate anyone else’s rights, and making sure nobody violates yours.  In terms of the former, the main issue is the use of other people’s images on your web page.  This most commonly comes up in the use of icons.  For example, in your top-level menu you might want to use a Tweety Bird icon for the link to your bird gallery, and perhaps a Scooby Doo icon for the link to photos of your dog.  These icons are easy to find by searching through Google Images, but just because you can find them on the internet doesn’t mean that using them isn’t a violation of the copyrights for those images.
    In terms of your own images, it’s a good idea to place a copyright notice on your web site to protect your own rights.  In the U.S. (and some other countries), you don’t need to do anything special to obtain copyrights for your own images; you implicitly own the copyright as soon as you create the image.  However, explicitly registering your photos with the copyright office provides more legal protection, since it provides proof of ownership.  Refer to the copyright office in your country for specific information on copyright laws.  Note that explicitly registering images with the copyright office typically involves a fee, and can take months to complete.
    As we’ll see in Chapter 11, adding a copyright notice to each of your images via Photoshop is simple, and needn’t interfere with the aesthetics of the image (if done properly).