Adding pictures to your website!
There are three stages that you have to go through if you want to add pictures to your website. They are:
1. Getting your hands on some good pictures.
2. Preparing the pictures for your website.
3. Uploading the pictures to your website.
In this tutorial, which is aimed at website owners who have little or no experience of web design, I’m going to quickly take you through each of these three stages and although this tutorial won't make you a Photoshop grandmaster, it will certainly give you enough information to add pictures to your own website without having to call on the help of people like me!
Stage 1: Getting your hands on some good pictures
Ok, so you want to add (i.e. upload) some pictures to your website. The first thing you have to do is find suitable images for your website. There are three main ways of doing this:
1. You can take photographs with a digital camera.
2. You can use a scanner and scan images into your computer.
3. You can take images from other websites.
Using photographs that have been taken by your own digital camera
Over the past two years the price of digital cameras has plummeted and yet, at an equally alarming rate, the quality of mass produced digital cameras has shot through the roof. These days, if you shop around you can pick up a brand new 5 megapixel digital camera for around £50. This was unthinkable three years ago!
When buying a digital camera, there are a number of variables that you should be aware of. These include the power of any optical or digital zoom facilities and the amount of available memory. Mac owners are advised to be extra careful to make sure your camera of choice is Mac compatible. Many people make a great fuss over the number of megapixels that the camera can produce. The higher the number of megapixels (million pixels) a camera has, the better and sharper the image and the more you can increase the size of your photo before it loses quality. However, when you’re producing photographs for the web, you certainly would not want to be using pixels which an absurdly high definition. Such images would take up lots of webspace and would be painfully slow to download. As a matter of fact, one of the biggest problems I’ve encountered with digital cameras is that the default image resolution and size settings are always far too high for any semi decent website.
If you’re using your camera outdoors then it’s a good practice to switch off the camera’s LCD wherever possible. Those tiny little screens guzzle up battery power at an astonishing rate and one of the best purchases you could make to go with your new digital camera would be a power adaptor so that you can operate your camera from the mains power supply, without being dependant on batteries.
Installing a digital camera (the usually come with installation software) is a fairly quick and painless process, even for the layman. Once you’ve copied your images from your camera’s memory over to your computer’s hard drive you’ll probably notice that when you view your images they are fairly large in terms of file size, resolution and dimensions. If you’re in inexperienced photographer, you’ll probably also notice that your images are … how shall I put this …hmmm….emmm… rubbish! Taking good photographs is a skill that demands respect, patience, study and practice. Speaking from a personal viewpoint, when I first became interested in web design, a digital camera was an essential tool of my trade. I was always carrying a digital camera around and taking photographs for websites that I was building. These days I have to confess that I avoid taking photographs like the plague! The good news however if that even if your digital photographs are not of the highest standard then it’s possible to correct flaws (such as poor lighting conditions or red eye) using software like Photoshop.
Using a scanner to scan images into your computer
Another way of obtaining pictures for your website is to use a scanner to scan images from brochures, books, posters and other paperish (I’ve just invented a word!) sources straight into your computer. As with digital cameras, the price of scanners has dropped massively over recent years whilst the quality has improved. Shop around and you’ll be able to pick a fairly decent scanner up for around £30. Scanners, like digital cameras are very easy to install and normally come with their own installation software.
As is the case with digital cameras, too much emphasis is normally placed on the resolution of scanners. With scanners however, resolution is not measured in megapixels (as we see with digital cameras) but rather, in dots per inch. However, once again I would stress that images that are to be used on the web do not need to be scanned in at a super high resolution. For me, the most important variables when choosing a scanner would be the manufacturer, the size of the scanner and the speed at which it can scan images. It would be in your interests to get a scanner that is manufactured by a reputable company in case you ever need to download drivers for your scanner or are in need of some technical support. About six years ago I purchased a scanner from a company called Black Widow. The scanner worked fine and all was well, but one day Microsoft decided to release a new version of Windows and suddenly my scanner was rendered useless because it wouldn’t work with the new version of Windows I was running. Naturally, I attempted to download new drivers from the manufacturer’s website. The result? I couldn’t because the manufacturer (for one reason or another) had gone out of business! The size of the scanner is also important, at least to me. In my experience I’ve observed that some scanners are fairly large and take up lots of desk space whilst others (which work perfectly fine) are only a tiny bit larger in length and width than a piece of A4 paper. For me, desk space is important and so far I see no great benefit in investing in an oversized scanner. Finally, the speed of the scanner is very important. Sadly this information is not always available at the point of purchase, but if at all possible you should try to see a demonstration of your scanner of choice working before making your purchase. Some scanners seem to take ages to heat up and get out of the starting blocks. Others perform their job in a quick and apparently effortless fashion. Don’t be scared to ask for a demo!
Taking images from other websites
This is by far the easiest method of obtaining pictures for your website. You don’t need any special equipment, other than a computer and a lot of the time the images are already in a fairly good state to be used on your own website. Taking images from other websites is usually a very easy process. For PC users, all you have to do is right click, then select "Save Picture As..." (Mac users- control-click and select "Download image to Disk", then choose a suitable location on your hard drive, hit "Ok" and bingo, you've got it! But a word of caution- taking images from other websites and using them on your own website presents a great legal risk! If this is the road you wish to go down then please proceed with EXTREME caution!
Whilst I’m no lawyer, my experience in this area is that people in general seem more inclined to turn a blind eye whenever non commercial websites “borrow” images from elsewhere. However, when a commercial website does so then a hostile reaction should be expected. There are however, certain situations in which a website owner could quite happily and openly take images from other websites and use them on his own website without fear of being legally challenged. For example, it would be quite reasonable for a car dealership that sells Ford cars to take images of vehicles from the official Ford website and use them on their own company website. Likewise, it would be reasonable for the owner of a website that sells musical instruments to download and use an image a Fender guitar that has been taken from the official Fender website. However, even in these kinds of special situations, my advice would be to ask permission first and to demonstrate a little bit on online etiquette by either altering the image and/or leaving a small notice saying where you have taken the image from. It may also be wise to provide a link to the other website if you want to keep your nose extra clean! You can of course purchase "stock" photos from websites which make a living by selling you the rights to use images from their massive online image libraries. This is a good option if you are absolutely determined to have images of the highest possible quality and you do not want to hire your own photographer. The process of paying for and using stock photos is, of course, perfectly legal but it is for the most part a very expensive option.
Some web developers, like myself, occasionally write code in an attempt to prevent people from stealing images from websites which we’ve built. For example, on the First Vehicle Leasing website (http://www.firstvehicleleasing.co.uk/) I added some javascript which prevents visitors from right clicking their mouse and selecting “Save Picture As…”. Whilst these scripts do a fairly good job of deterring the lay person, the fact remains that anyone who wants to can still take images from other websites if they’re absolutely determined. If you are a website owner who is absolutely determined to stop your images from being stolen, then my advice would be to consider watermarking your images. I may cover this process in another tutorial, but for the moment let’s move onwards and upwards!
Stage 2: Preparing pictures for your website
Ok, so let’s assume that you have an image stored on your computer’s hard drive and you would like to now add the image to your website. You may have gotten the image via a digital camera, a scanner or another website. In any case, our next task is to prepare the image for your website. This means; making sure your image is of a reasonably high quality (you want the picture to look nice, right?), making sure that your image is of a suitable size (in terms of length and width), making sure the image is of a suitable file type and finally, making sure that the image doesn’t take an absurdly long time to download when people try to view it. I’ll be talking you through each of these stages from a Photoshop perspective, but please let me stress that this process would be virtually identical amongst many other photo editing software packages.
Making sure your image looks nice
In this example, I'm going to put my neck on the line and take a picture from another website. Below is the original image which I took from the Above the Clouds website at http://www.abovethecloudsinc.com/. Incidentally, they offer fantastic value for money if you're ever interested in having a go at riding on a hot air balloon!
So, as you can see, it's a very nice looking image. It's colourful and very sharp. In the context of the hot air balloons website, it's perfect, but for my own (imaginary!) website, the picture is perhaps a little bit too big. But before resizing it, I'm going to make a couple of simple changes by first removing the van, the people and the trees from the image. I do this by opening the image in photoshop and selecting the CROP tool.
Using the crop tool, I can then left click and drag across the area that I want to crop, like so:
Now, I simply right click and select "crop" and the unwanted sections of the image are instantly removed!
As things stand, the image is looking pretty good and I would be more than happy to have an image like this on any website. However, in this case I'm going to resize the image by making it a little bit smaller.
Resizing the Image
Now I'm going to resize the image (I want to make it a little bit smaller). I do this by selecting "Image" then "Image Size...". This brings up a pop up window that allows me to resize the image. For the purposes of this example I'm going to give the image a width of 200 pixels, so I enter "200" and select "pixels from the drop down inside the pop up window. This all happens at the "Width" part which is near the top of the pop up window, just below the words "Pixel Dimension". A quick word of advice- make sure the bit that says "Constrain Proportions" is ticked! Leaving it unticked would make the image go out of proportion when its resized and the picture would look rather wonky! Once I'm satisfied with my image dimensions I simply select "ok" and we're on our way! Those of you who are using images taken from digital cameras or scanners will need to take this stage very seriously- digital cameras and scanners tend to produce images which are massive! Be sure not to make the mistake of uploading oversized pictures to your website!
And now that the last thing that remains is to save the image. We do this by selecting "Save for Web...". This brings up a pop up window with a handful of fields on the right hand side that allow us to save our image for the web. You'll notice, on the pop up window, a drop down which is defaulted with the word "JPEG". The options on this dropdown allow you to decided the file type that your picture will be saved as. Digital pictures can be saved as a variety of different file types such as; JPEG, GIF, PNG-8, PNG-24, TIFF and WBMP. For the purposes of the web I would recommend that you save your images as either JPEG files or GIF files -forget about all the other options!
JPEG images tend to feature a wider spectrum of colours and detail than GIF images. JPEG is a perfect format for pictures which feature a wide variety of different shades, tones and colour gradients. So, a picture of a human face for example, with all it's subtle changes in colour and tone would be best saved as a JPEG.
GIFs on the other hand are better for images that only have a small amount of colours and that need to download quickly. A company logo or a simple cartoon character, with their simple colours and sharp contrasts would probably be best saved as a GIF.
As a rule of thumb, photographs are best saved as JPEG files and other types of images (unless they feature photograph-like variations in tone and colour!) are best saved as GIFs.
When you're saving your image there is one other important choice that you have to make - the quality with which you save your image. Images which are of very high in quality have a larger filesize and are slow to download. However, images which are low in quality appear pixilated and are not very pleasant to look at. So, in a sense you are walking a tightrope! Your challenge in this situation is to save your images in a way which gets a good balance between quality and filesize. Too much quality and your pictures will take ages to download. Too little and your pictures will look rubbish! Thankfully the Save Image for Web pop up window on Photoshop gives you a preview of what your image will look like as you browse through the various settings. Photoshop also gives you a rough estimate of how long it thinks your picture will take to download when people are attempting to view it on your website. This information is displayed along the bottom left hand side of the pop up window, where you'll see the estimated file size and the number of seconds that a of your image download will take at 28.8 Kbps. The good news is that hardly anyone in the entire western world uses modems which are a slow as Photoshop would have you believe! So, if Photoshop tells you that an image will take 10 seconds to download, you can be reasonably sure that the real figure would probably average at around 3 seconds.
With JPEG files you adjust the image quality by selecting either low, medium, very high or maximum from the dropdown that's under the filetype dropdown. With GIFs, the image is adjusted by lowering or increasing the number of colours that the GIF file will feature. So a GIF with 128 different colours would be of a higher quality than a GIF with only 7 colours. Feel free to play around with these settings until you find some values that suit you. If you get stuck then you can always just select a preset from the drop down menu that's featured at the top right hand side of the pop up window. Incidentally, on the pop up window you'll also notice a variety of other drop down menus and checkboxes. These are all fairly advanced functions that a serious Photoshop user would be interested in, but mere mortals like you and I do not really need to concern ourselves with them. If you want to play around with some different settings though, please do feel free.
For my particular example, I saved the image as a JPEG of "very high" quality.
And there you have it! That's really all there is to it. Here is the final image in all its glory:
Uploading pictures to your website
So, here we are at the end of the road. Our image is ready to be uploaded onto our website. The method by which you upload images to your website varies enormously and I'm only going to very briefly touch upon a few different methods.
Most people would upload files to their website by using FTP software like Cute FTP, Smart FTP or my own personal favourite, CORE FTP. Sometimes your webhosts will also provide you with online control panels such as CPanel which allow you to upload files without the need of having any special FTP software stored on your own computer. However, my own experience of Cpanel is that the process can be a little bit slow at times and it only let's you upload a handful of files at a time.
This article is aimed primarily at my own clients, so for you folks the good news is that I've made the process of uploading images mega simple. If you are a client of mine and I've built an online application for you then your application will almost certainly feature a facility for uploading images to your website easily and effortlessly. The way I build each of my online applications varies, but ultimately the image uploading process will boil down to you clicking a "Browse.." button. When the browse button is clicked, you'll see a list of some files on your computer. All you have to do is navigate through the various folders and directories on your computer until you find the image file that you want to upload. Then left click once on the image file that you want to upload. Now click "open", followed by "upload" (or "ok") and as if by magic your image will be loaded onto your website!
If you are in any doubt or need help with any of this stuff, please don't hesitate to get in touch. I'll be happy to point you in the right direction. (David Connelly)
SPECIAL NOTICE! If you don't want to spend a fortune on buying photoshop (it's not cheap!) then Infranview is a good 100% FREE alternative. With infranview you'll be able to do pretty much everything that I've described in this tutorial. Sure the controls are a little bit different from Photoshop and it's a little awkward at first - but all of the features I've spoken about here are on it including our good friends, the crop tool and the resize tool. You can download Infranview from THIS website.
