Using a website as an image portfolio

Online content management software will do a lot with the images you upload. However, in the interests of making things easier for yourself, and the visitors to your site, you need to do some things before uploading.

These can be roughly broken down into:

  • Reducing the file-size
  • Reducing the dimensions

It’s all about what you want to show the world.

Images have a lot of information in them

Digital camera images are more than a pretty picture, they also have additional information embedded within them which will reveal interesting detail for those who value these things.

Exif, or Exchangeable Image File Format, is a standard which is used by image, video and sound recording devices to encode information in the file. This is a subset (that is, it is contained within) of image metadata, which is information that is held in the image and includes all sorts of additional information encoded on the image by the camera.

This information can be useful to display to give information like exposure levels, f-stop and even location details. Basic information such as copyright, name of the photographer and time and date is also encoded when you take a photo.

You have to pre-process

RAW images can be absolutely massive, and other file formats aren’t necessarily far behind. It might make you happy to upload a 18MPX image that’s the size of a wall, but the trouble is that viewing it will take forever, eat bandwidth (how much upload and download a person has) and be impossible to view without endlessly scrolling from one end of the screen to another.

There’s a relationship between the number of dots per inch (dpi, mpx) and the file-size (kb, mb). The bottom-line for the web is that you should have small file-size in order to make your website work better.

Click to see the relative file size versus the megapixels.

Reduce the file size

As already stated, an 18MPX image might look fine on your computer, however, expecting an online application to deal with it is asking a lot.


Any image with a file size in the megabytes needs to be worked on. In an ideal world, the image will be nnnn KB, where nnn is a number, and KB is Kilobytes. It takes 1,000 (well, actually 1024) KB to make 1 MB or Megabyte.

You can reduce file size in a number of ways and several applications offer web-ready save options.

You can begin by reducing the dpi. Dots per inch is a measure of how dense the image is with dots. A higher dpi will look similar to a lower one on a computer screen. The difference will be the file size and whether the image can be made bigger. That’s why printers ask for images as 300dpi so they can be manipulated easier. Hand someone a 72dpi image and ask them to make it bigger and you get pixelation which is no good at all. But an image which is 72dpi on a computer screen, yet is the width OF that screen will look fine!

Reduce the dimensions

A computer screen is a good measure of how big to make an image. At the time of writing, the highest resolution computer screens were 2560 x 1600. Computer monitors use the points-per-inch measurement rather than dpi which is more for printing, which can become confusing, especially when mixed with the term “resolution”.

The bottom line, however, is that you can still have a really great looking image that has a far smaller file size. And that’s what the web needs!

Doing all this on a mac using Photoscape X

There are doubtless a bunch of easy ways to process images to put them online, and I’ve worked with a number of them, including Photoshop and iPhoto. I’m pretty sure Apple’s Aperture  and Adobe Lightroom will also do this.

My image application of choice is Photoscape X, which I chose based on its use of straight-up file folders rather than wrapping my images up in other ways. It does everything I need it to do and includes a bunch of processing features.

Copy the image, don't move it!
Copy the image, don’t move it!

First, make copies

Always make a copy of your original images to work on. This is so if you make a mistake, or want to create a different sized image for a different purpose, you still can. This is true of just about anything on a computer, from Word documents to code. Make sure you at least have a viable original before making modifications, for if something goes wrong, pain can ensue.

I’ve got a folder set-up in my Photos folder called 01 – processing.

In PhotoscapeX, I find the images I want to work on, and drag and drop them to 01 – processing. When asked, I make a copy.

Second, work on the images

If I want to play around with the image, with colour balance, curves and levels (among others), I click the Editor tab, select the image and have at it. Resizing the image is also a must, because if I’ve taken a photo on the DSLR, it’ll be massive. The idea is to make the image a reasonable size for a computer screen. For example, my computer monitor is 1280 x 800. 

Make sure when you do this, that you keep the preserve aspect ratio ticked, as it will make sure there is no squeezing of the image.

Cropping the image to remove things you don’t want can also improve your photo, and Photoscape offers a bunch of different options as well as a drag-and-drop crop tool.

When that’s done, I click Save, and choose the Jpeg Quality (set as high as possible) and DPI (72dpi at most).

I should note at this point that Photoscape X is really good about originals and it’s here you can save an original copy of the image. I prefer to maintain the original images in their original folders, it seems neater to my mind and less likely to lead to mistakes. However, if you don’t want to work this way, make sure you choose the Save a backup option!

Next, the upload

Whatever online tool you’re using will hopefully allow you to upload your image, otherwise, what’s the point?

I’m using Piwigo on a self-hosted website. I dabbled briefly with Flickr, and thought Smugmug and 500px were pretty good. Picasa is another service, which has an app you can download from Google.

But whichever service or option you choose, it’s good to find something which will meet your needs as a photographer (either amateur or professional).

My shopping list includes:

  • Editing Exif data to include copyright and other information
  • Adding watermarks for downloaded images
  • Adding tags to images
  • Easy use of albums

In this way, I’ve found Piwigo pretty good so-far.

But if you know of alternatives, like Gallery for example, let me know in the comments below!

Author: gotheek

Sometime writer, full time human.