Day 14 of #100daysmarketingcreatives - Website Photograph Sizes
Today I want to explain a few basics about using photographs on your website. I know we have already created some web pages containing photographs so I should perhaps have covered this before that, however, I though it would be nice to show some progress first with a simple website before covering too much 'boring' stuff! Once you read today's post, however, you might just need to go back and change some pages that you created in early days in the project such as Day 10 - 1st Homepage Essentials, Day 11 - 1st About Page Essentials or Day 12 - 1st Portfolio Page Essentials.
The first element to consider is photo resolution. Most modern cameras will create images at 300dpi. That means there are 300 dots for every inch in the photo. That is a lot of dots and a lot of information to carry in a photograph which can make the photograph large and therefore slow to load, particularly if someone is loading your web page on a mobile phone or where their is limited internet speed. Fortunately most computer screens and certainly mobile screens do not need such high definition so by reducing your images to 72dpi they will still display in really good quality on a computer screen but the file will become much smaller. Keep copies of your originals though as you will still need 300dpi or more for a good print and keep your originals so you can create more different sizes later if needed!
The next consideration is image height and width. This is often described in number of pixels. Most modern cameras will easily create images that are 6000 pixels wide, sometimes much more. Again this can create large files that can be slow to load. Your website software will usually let you upload a large file like this and it will display just fine but it will display equally as well yet much faster if you resize it to the area of screen that you want it to fill. Be careful, however, because if you reduce it too much you will start to lose quality and it will not display well. I currently work to the following rules but as technology continues to improve over the next few years things may continue to change.
Looking at the homepage above, most of your website is designed to display within a band down through the middle of the screen between the left hand side of the logo and the right of the contact menu. This is so that the website looks fine on all different types of computer screen whether they are square, rectangular, widescreen, low or high resolution. There will be the odd exception but most will look reasonable because all that will happen is that the borders on either side of the central area will grow or shrink depending on the screen. Obviously truncating the body text in the central band would be disastrous but if you could not fill the entire screen with photos or colour your website would look very plain and poor so most website templates like the one above allow you to add photos that will fit the entire screen width and it will stretch them to fit accordingly. For full screen photos like this I currently use 2000 pixel wide images although I suggest you might start increasing them to 2500 pixels wide to accommodate some of the higher resolution screens now becoming more widely used.
When I am displaying products on a website full screen within the central band I opt for 1500 pixels wide. It therefore follows that if your image is going to fill half the width of the screen you might consider 750 pixels wide and for large navigation buttons such as the ones on Tabatha's homepage I used 300 pixels x 300 pixels. Remember all of these are at 72dpi! When manipulating images display set them to display at 100% size so that you have a good idea how big they would be at that size.
So what image type - .jpg or .png? There are many types of image format but .jpg and .png are the most common on a website. Generally you should use .jpg for photographs as these can handle a very high number of colour levels and files compress well so that they are quick to load. Png files, on the other hand, might be better if you are using graphics for example in a logo. You will find that this format creates less jagged edges where straight lines are needed and you have smaller number of colours involved and it allows you to create a transparent background which a jpg will not.
So how do you resize photos? Windows Paint is included with Windows software. It has options to select and crop images and also to resize images to a specific image size. Unfortunately it does not allow you to change the dpi. You can use Photoshop to edit your images. This is widely used but probably does a lot more than you need and at a cost. There are, however, 2 free alternatives that you could use - GIMP is an open source alternative. Its interface might be a little rough around the edges compared to Photoshop but it is well supported and very powerful. The second alternative is Pixlr which is also free and web based so you can run it directly from your browser without having to install anything.
Finally you might wonder why you upload any type of photo to Instagram, for example, but have to think carefully when adding to your website - that is because some systems like Instagram will resize your photos to the optimum size for you automatically so that you do not have to worry about it. Some website software may also do this for you so check first and if in doubt follow these guidelines.
If you have found this free advice useful, please return the favour by following me on Instagram or Facebook liking my posts and mentioning me to your friends! Thanks.