The internet is a visual medium and a big part of that is photos.
You are using photos on your website, right? If you’re not, you should be. If you are, good for you! But are you using good quality photos?
I apologize in advance because this mini class is going to get kind of geeky. There will be numbers. There will be technical terms. I will try to keep the geek-speak to a minimum, but you need to know a couple of terms and I haven’t found any other way to explain it except words. I tried interpretive dance once, but I broke vase and bruised a shin, so it really wasn’t worth it.
In this mini class I’m going to talk about preparing a photo or graphic for use on your website.
File formats
There are 3 basic file formats for photos and graphics on the web: jpeg, png, gif. The end results might look the same, but they are different.
Gif (this is pronounced jiff with a soft ‘g’). Gif files are very small, which makes for fast load speeds, but they manage to do this by limiting the colors to 256. That’s not a lot of colors,so you won’t be using gif for photos. They are best used for icons, symbols, or small logos. Gifs will support animation – you’ve seen those horrible animated ads, right? – But not lengthy animation like you would with flash. They will also support transparency – in other words, you can make part of the image transparent so that the background shows through.
Jpeg (pronounced jay-peg). Jpeg files are reasonably small but they support 16 million colors. That makes them suitable for photographs. The photos you get from your camera are likely jpeg.
PNG (pronounced pea-en-gee). Png files will be larger than jpeg, but they allow for transparency. Png-8 files will allow animation, similar to gif files, and only allow 256 colors while png-24 files will display millions of colors. Png-24 will be similar to jpeg but can support transparency.
Which file format should you use?
Photos – use jpeg. If you need some of the photo ‘cut out’, then go with png-24
Logos and line art – png-8 or png-24 are best here
Icons – I prefer png, but you can get away with gif
Resolution
The best way to understand resolution is to think about how the photo would be printed – with dots of ink. If you look closely at a newspaper photo, you will be able to see the dots of black ink. The news printing press is only capable of printing a few drops of ink per square inch of paper because the ink would smear. A similar thing happens with your ink jet printer. The dots are much smaller and you can print many more dots per inch. This makes the dots harder to distinguish and allows for better color shading.
Cameras and scanners will sometimes create a photo that is set at 300 dpi (dots per inch). This allows the photo to be printed on large pieces of photo paper without getting blurry or jaggedy edges. Printing companies will often want images at 300 dpi resolution, but check with them first.
Computer screens and websites use a resolution of 72 dpi.
If you take a photo at 300 dpi and reduce it to 72 dpi, the photo itself will decrease in size as will the file size. So if the photo you are starting with is 200 pixels tall and 300 dpi, when you convert it to 72 dpi, it will end up being about 50 pixels tall.
What resolution should you use?
72 dpi for websites.
Size matters
When you are buying a stock photo, downloading a creative commons photo, or editing one of your own, what size do you get? And what is this ‘pixels’ thing?
Remember when I wrote about resolution and dpi? It was just a few sentences ago, so I hope you remember. Well, dpi actually means dots of ink per inch of paper. When it comes to digital images that will be displayed on computer and phone screens, it is actually ppi, or pixels per inch. That pixel is one little spot on your screen. So photos for the web are saved at 72 ppi.
When pictures for the web are measured in size, they are measured in pixels, abbreviated px. A thumbnail image for WordPress is normally 150 px (pixels) wide by 150 px (pixels) tall.
The average website area where all the content is located is typically around 940 px wide. This means that, if you are getting a picture to fit inside that, getting the super large 3000 px version is a waste of money. A big photo for your website is probably going to be about 500 px wide. Most of the time, you’ll want something closer to 300 px wide.
For stock photo sites, that means you’ll likely buy the small version of a photo. Bonus: they are cheaper and download faster.
For background images, where the image will cover the entire width of your laptop screen, you will probably want an image that’s at least 1400 px wide and preferably closer to 2000 px wide, for people with wide screen displays.
Start big, get small
If you start with an image too large for your website, you can use your photo editing program to reduce the size and you won’t hurt the quality of the image.
If you start with an image too small and try to increase the size, you are going to end up with a hot mess. Those pixels will have to be duplicated and the program will try to make up for the lack of data, but you’ll end up with a blurry or pixelated mess.
Here’s an example. I took the original photo, reduced it in size and then blew it back up to the original size. See how blurry the spray and rocks are?
Just so that you get an idea of the scale of an image, this image is 523 px wide by 440 px tall at 72 ppi.
Software for photo editing
I’ll confess to owning and using PhotoShop CS, the big kahuna of photo editing software, but I design websites for a living and I actually need most of the features it offers. You, on the other hand, should save yourself several hundred dollars and get something much cheaper.
Photoshop Elements
At under $100, PS Elements will have all the features you need at a fraction of the cost of it’s big brother. There are versions available for both PC and Mac.
GIMP
GIMP is free photo editing software you can download from the internet. I’ve only toyed with it, but I have friends who use it and swear by it. It’s not as well documented and you’re going to have a harder time finding tutorials or books to show you how to use it. But being free, it’s hard to beat.
Canva
Available at canva.com, it’s free and online. I’ve played with it a bit and it should be more than enough photo editing software for many of you. Plus, you can find stock photos, fonts, and other elements right on the site.
Having a good looking photo on your site is not impossible
Since most web visitors are used to seeing professional level photos and graphics, you’re going to need to have great looking photos.
If you’ve got a WordPress website that doesn’t look the way you want people to feel about your business, contact me now. We can discuss your site, your needs, and how you can get a website that will knock the socks off your customers.
Did you arrive here by accident? Why not sign up for the free eBook Your Website Is Ugly and get the entire series of bonus articles, too.
