Home / Knowledge Base / Website Images / What to Know About Photos and Images for Your Website

What to Know About Photos and Images for Your Website

Probably the most complex task about owning and running a website is working with images. You need your website to load quickly and work well on all devices. Even though website software like WordPress helps you get images onto your website quite easily, there are are some things you should know to make working with images even easier.

This article will give you a guide and tips to working with images on your website. First, a table of contents since there's a lot here...

Finding good images for your website is important. If you have good photos, then use those but you definitely want them shot professionally. Things like lighting, depth and framing can make a huge difference. If you can't afford a photographer, then definitely use stock photos instead of your own. Just as good images can make a website look great, bad looking images can make it look terrible.

Here are some resources:

Image Editing Software

You're going to need it. There is software included in Windows (Microsoft Photo Editor) but we highly suggest getting something better like PhotoShop or Paint Shop Pro (less expensive).

When working with a content management system and images on a website, as we explain, it's important that they are the right size before they get uploaded to the server. Resizing an image by grabbing the handlebars on the sides will not make the file size any smaller, it'll only display it in a smaller space. People will take a picture with a digital camera and then upload it to their site without resizing it and it then comes in really slowly (line by line) when it looks like a small image. They didn't resize it properly. To do that, you need image editing software like Photoshop.

Programs like Photoshop can be expensive. The Photoshop Elements version costs less but sometimes people just want to do simple things like a resize or crop. Here are some resources for some cheap or free image editing software:

GetPaint.net - I haven't tried this one but I've heard good things about it. It seems to do the job. It's free and it's for Windows.

GIMP - I have used this one. If you're familiar with Photoshop, then this one will work well for you. It's free for Windows, Mac OSX and other platforms.

GimpShop - This is Gimp but in a familiar, Photoshop format.

Photoshop.com - Edit images online, in your web browser. I've tried this and it works. It's not as fast as I'd like but worth checking out.

Paint Shop Pro - This one I've used for years. It's really great, fast and easy to use. You do have to buy it but you do usually get some extras and I believe in paying for good software.

We also have some good resources on our Links page.

To work with the CMS like WordPress, you should also make sure you do have some good image editing software. It's a tool that you will need.

How to Optimize Images for the Web

An example of image optimization where 24% of the file size was reduced Your website needs to load fast, so a part of making sure that happens is optimizing images. Optimized images look good but the file size is small.

Some good tools to use to optimize images are:

https://optimizilla.com/
https://www.jpegmini.com/main/shrink_photo
https://compressor.io/
https://www.imageoptimizer.net/
https://kraken.io/web-interface
https://tinypng.com/ (for preserving PNG transparency)

Upload images there first and then use the optimized images on your website. It's an extra step but realize that images you post on your website will essentially live there forever (or a long time), so this step is worth taking. A fast-loading website is very good for SEO (hint, hint).

Putting Images on Your Website

Getting images onto a website is probably one of the more challenging tasks out there - but it doesn't have to be. If you know a few tricks, you'll get through it a lot easier. Here are some common pitfalls and ways to avoid using images badly on your website.

Resizing Images in Photoshop vs. Using Image Handlebars

Make sure that you are resizing images first in Photoshop (or any photo editing software) before uploading them to the website and not using those handle bars on the page to shrink things down.

What happens is, people are downloading the exact file you're uploading - no matter if you're specifying that it be shown larger or smaller on a page. Do you ever see an image loading really slowly - like line by line, going nowhere? Well, that's not really a slow Internet connection, it's a bad Webmaster. They're actually using an image that's too big and just showing it smaller - making it load too slowly.

Let's say you have an image (hiring-now.jpg is my sample image below) that's 786 kb with the dimensions of 2624 x 1968 pixels (width x height) and you want to put it on your website. If you upload that image through the CMS, then you've just uploaded a 786 kb file to the server.

You're using that image on a page but it looks too big, so you use those little handlebars (the corner ones so that you maintain the correct proportions) to shrink it down to a respectable size - like this:

It's now being shown at 500 x 375 pixels instead of 2624 x 1968 pixels. It's smaller... in appearance.

You think you've corrected things with that handlebar move but you really haven't. People that visit that page are still downloading that 786 kb file that you uploaded. It's just shown at the dimensions of 500 x 375 instead of 2624 x 1968 pixels. It's still the same file. It hasn't changed. It also doesn't look as good now because it's being scrunched. This page will take a few seconds longer to download. You will also get charged for the bandwidth of the larger image even though your web page is showing it at a smaller size.

Here is an example of doing this wrong (opens in a new window).

The proper way / best practices:

Here are the steps to do this the right way:

Open up Photoshop or an image editor. On a Mac, you can use Preview. On Windows, you might have a program like Microsoft Photo Editor (MS Paint won't quite do the job). There are some less expensive versions of Photoshop available like Photoshop Elements. There are some less expensive photo editing programs like Paint Shop Pro by Corel or else look for a free image editing program like Gimp.
Open your image in the image editing software.
Save it as a new file. This is to ensure that you do not overwrite your file because you might not be able to get the original image back. Save it with a "-sm" at the end of the file name or else in a different folder. Also, a best practice with files for websites is to stick to lower case letters and numbers only and replace spaces in the file name with a dash or underscore. Having a question mark, ampersand or other characters in your file names (for any files -not just images) could cause them not to be displayed properly.
Resize the file using a "resize" function in the image editing software. This process includes some re-sampling so that you end up with an image that does not look scrunched. You can optionally do some sharpening with a sharpening filter if you want to make the smaller image look even clearer. Make sure you resize it proportionally. You should see a lock symbol (or something similar) between the width and height measurements. This means that the proportions are locked. If you don't do it proportionally, you will distort the image. People and logos really don't look good distorted.
Save the file again.

That's it. The steps are simple but important. That new image is now ready to upload to the website. Compare file sizes and you'll see the difference. Know that people will be downloading any image that you put on your website thousands of times. If you save 200 kb with an image, you're saving a lot of bandwidth!

Some additional image optimization tips:

Reduce the DPI (dots per inch) to 72 dpi. Computer monitors can really only show 72 dpi. If you have 2 of the same images on a web page, one at 72 dpi and one at 600 dpi, you won't notice a difference visually. The 600 dpi image will load more slowly because there's more information but they will look the same on the monitor. The only real difference is that the 600 dpi image will look better if someone decides to print the web page but the expectation when printing a web page is that it is not a print-ready image. It's just to have the information. It's not like a printout of a web page is going to be framed or anything like that. That's what PDF files are for.
Change the mode from CMYK to RGB. If it is a CMYK (print) image, it might not look correct on a computer monitor if it's in that mode. This is because computer monitors use red, green and blue to show colors instead of cyan, magenta, yellow and black.
Set the compression on JPG images. This setting will just be your preference and will depend on the image you're using but to optimize images for the web, see how high you can set the compression and still have a nice looking image. Don't go too high but adjusting it a little can help make a smaller file.

Think About Layout

Just don't throw images here and there - plan it out! That web page is most likely going to be worked on once and left there on the web indefinitely. Since it'll be there a while (if not forever), do a good job with it so that it stands the test of time.

The first thing you need to know is how much space you have to work with. With most website templates and those built with a specific design in a CMS like Joomla or WordPress, the space you have for content is somewhat limited - mainly the width. You don't want people to scroll left and right on your web page, right? That's why Webstix designs with width in mind. We check to see what the most popular computer monitor resolution is and design so that most people with modern computer monitors will not have to scroll left and right. Scrolling vertically is fine, of course, so that's why we're concentrating on width.

Take a screen shot of your website, open it up in Photoshop and then crop it so that just the content area is showing. Measure it (find out how many pixels wide it is) and there you go. That's the width of the area you have to work with. Mac users can just take a screen shot (command + shift + 4) and you'll be able to measure it as you're taking the screen shot.

For example (and to keep things simple), let's say that came out to 600 pixels wide. That means the widest image you'll want to use on that page is 600 pixels (or a few pixels under that).

You could do several layouts - so, like we said - think about layout. The easiest way to think about your layout options is to think about splitting that width into 3 columns. Each one will be 200 pixels wide.

Option 1: Columns 1 & 2 have text, column 3 has an image (wrapped text).

Option 2: Column 1 has an image, columns 2 & 3 have text (wrapped text).

Option 3: One row is an image, another row is all text (not wrapped).

With options 1 and 2, the image you're using with have a width of 200 pixels or so since that image is taking up that whole imaginary column. With option 3, you're simply putting an image above or below a paragraph of text.

Option 1 is a good way to go. People naturally get done reading a line of text and go all the way to the left to continue reading the next line. Having an image there may jar things or have them quickly search for where the text starts.

Option 2 is fine, too. Vary your images left and right throughout your text.

Why aren't we saying inches?

Well, quite simply... what is an inch? There aren't inches on computer monitors - there are pixels. How many pixels you'll have per inch will depend on what resolution a user's computer monitor is set at and what size monitor they have. Since not everyone out there is using the same sized computer monitor with the same settings, we don't know how many inches something will be displayed as. We don't. So why use inches? It's a useless measurement with website graphics and images.

Taking Pictures for the Web

There is a lot that could be said about how to take good pictures. Here are just a few ideas and comments to try to help you out.The quality of images that you put on your website is important. Pictures that look grainy or that have poor lighting are not doing your website justice - especially if they are pictures of your products. Using only one light source (like a flash) will make your images look flat... things like this is what we're talking about.

Hiring a professional to take really good pictures can very well be worth the investment. Not only will you be able to use these pictures on the website but you can also freshen up your other marketing.

Some tips:

Use a good camera. Don't think that a mobile phone camera was meant for great pictures. These pictures can sometimes look really grainy. There's only so much a graphic artist can do to make an image look better. Things go much smoother when you start with a good quality image.
Use good lighting. Most of what going into making a picture look great is the lighting. Like we said, one light source can make things look flat. Go with a 3-point lighting system. Don't mix natural light and indoor lighting. White balance your camera, too. Low light will not make your subject or product look good. Plan your lighting.
Framing and angles. We're not talking about what you put around an image, but how is the shot framed? Also think about the angle. For example, taking a picture of a house or building from a low angle can make the building look so much bigger and grand.

In general, how your photos look will say a lot about how your branding your company and your products. A picture is worth a million words, right? Make sure those are good words, not bad ones.