We love building websites for our clients — combining tight, responsive coding and expert UI/UX design for an attractive and engaging online home. A website, however, simply won’t work if it doesn’t have attractive, suitable photographs to add visual sparkle to the overall design.
There are rules you must follow in using photographs. We’ve seen others break these rules, on occasion, with mixed results — some of them disastrous. The following list contains 10 vital things you should know about using pictures in your website or blog. This goes beyond SEO concerns of alt text and using proper keywords in captions.
1. Size matters
Let’s say you’ve found the perfect picture, but when you use it on one of your web pages, it seems chunky. Likely what you’re experiencing is pixilation. This comes from using a picture that starts out too small. When you use it in your article or on your homepage, you’re stretching it to the point where you can see the individual dots that make up the picture.
You need to do one of two things:
- Find the original picture with a far higher resolution (if it exists). Sometimes, you can accomplish this by going to images.google.com and searching not by a description or keywords, but by uploading the picture itself. Simply click on the camera icon in the search bar. You have the option to search by a known image that’s already online, or by uploading your “too small” picture. Google’s image detection algorithms do pattern matching against all of the images in its database and attempts to return those that are close matches.
- Failing that, you need to find a different, better quality image.
Once you find the better image, get the appropriate permission to use it.
Of course, this is only half of the “size matters” problem. You can also use a picture that’s too big — two high a resolution. Optimally, you should choose an image that is in the range of kilobytes to dozens of kilobytes in file size. With faster access speeds, some people will have no problem with pictures in the hundreds of kilobytes or even single-digit megabyte range, but you risk alienating an unknown quantity of people who will find this an unwanted barrier to your website.
Several years ago, when Wi-Fi was relatively new, I took my laptop to my favorite coffee shop and made the connection to do some research. One website I found locked up my computer, and that stopped my research project dead in its tracks. Later, I revisited the same website with a cable connection. Even there, the website was slow to load. And it was easy to see why. The owner of the website had several high-quality, but huge images on their home page — each one over 10 MB. The owner was grateful when I let him know of the problem. He had been curious why his traffic had dropped so precipitously.
The solution is simple. Make a copy and resize the duplicate, with your favorite picture editing software, until it’s between roughly 10 and 90 KB in size. For a photograph, this will give you an image that is about 200 to 1,000 pixels on its longest dimension. For most design requirements, this should be sufficient.
If the picture contains small details that are important to the visitor, you can link the displayed image to the full-size version. It’s always a good idea to indicate this in the picture’s caption, and warn the visitor of the size of the larger version if it’s exceedingly large.
2. I found it on Google
Doing an internet search, then clicking on the “Images” tab at the top of the search results, will bring up a page full of pictures that somehow relate to your search topic. Finding an image this way does not automatically give you the right to use it.
You need to get permission from the copyright owner of the image. Of course, you may find that hundreds of websites have “stolen” the picture, so why shouldn’t you?
The copyright owner has the right to force you to stop using the picture. They can even have your web hosting company intervene. Your entire site could be blocked. At the very least, your more alert visitors are going to wonder why you changed the picture. Embarrassing.
3. To claim “Fair Use”
There is a law in the United States that permits limited use of copyrighted materials without first needing to gain permission from the copyright owner. But careful! There are restrictions on using this tactic. There is also the danger that your website could be blocked in certain countries that don’t follow this convention.
Using an entire picture for commercial purposes and in a way that jeopardizes the copyright owner’s merchantability of the photograph will likely fail the Fair Use doctrine tests.
If you are providing a non-profit, educational service and using only a low-resolution, thumbnail version of the picture, you might be safe in using an image that is relevant to your article or page. When in doubt, consult your attorney.
4. Linking to another website’s pictures
I’ve seen people link to another website’s picture, stealing not only copyrighted material, but also the bandwidth to display it on their own website. That’s a double theft. There are ways to set up a website to block such theft from happening in the first place, but you don’t want to be caught doing this sort of thing. Get permission or don’t use it.
5. Public domain
The safest bet on using someone else’s pictures is to use those that are in the public domain. This means that the original copyright owner no longer has any restrictions or claim on the use of the picture. This can be because the copyright has expired or because the copyright owner donated the image to the public domain.
Care must be exercised, here, too. Just because a website says that an image is “public domain” may not necessarily mean that it is. Some stolen images have been labeled “public domain,” but the label means nothing if it’s not true. When you use such a stolen image, you are breaking the law. So, only use images from reputable websites. How can you tell? For one thing, the website has been around for a few years. While this is no guarantee, it does improve your chances. A black-hat website would likely not last long with hundreds or thousands of copyright violations.
Websites that perform at least some kind of vetting of pictures, or provide a method of filing a copyright or DMCA complaint will also improve your chances. In the end, though, you are responsible for ensuring the picture is indeed “public domain” before you use it.
6. Proper use of Creative Commons resources
Some photographers and artists have made their images available for limited use by issuing them with a Creative Commons license.
Creative Commons is a non-profit organization that helps to expand the amount of resources that can be shared. The organization offers its licenses free of charge, each one stipulating which rights a copyright owner retains. Some allow others to use their photographs, illustrations, videos or other materials merely by giving proper attribution. Some licenses restrict their materials for non-commercial uses only.
7. Follow stock image site rules
8. Did you get a model release?
When you use a photograph that contains the clear image of one or more person’s faces, you need to obtain a model release before using the photograph. Some stock image sites include this with their license. Some sites completely ignore this. Using the picture of a person without their permission can result in embarrassing and costly requirements at a later date.
9. Proper attribution
What does “proper attribution” mean? It means whatever the copyright owner wants it to mean. This is usually stipulated with the license. The copyright owner might simply require that you include their name next to the picture. Or they may require a link to their website. This is entirely up to them. This is easy to follow. And if you don’t like their requirements, then don’t use the picture.
10. Using your own photographs
Perhaps the safest method involves using your own photographs. If you have a staff photographer, then you may have all you need. Of course, it costs money to send them to Paris for a picture of the Eiffel Tower, if you need that sort of thing.
Owning the rights to the photographs, though, does not relieve you of the need to obtain a model release from people who are in your photographs. You should be able to download standard model release forms from the internet. If you have questions, check with your attorney.
Bonus Tip: 11. File type matters, too
There are 3 main file types for use on a website — jpg or jpeg, gif and png. Each one has its plus points and drawbacks. And file size can vary depending on which file type you use.
The jpg or jpeg format is ideal for photographs of nature, people or other real-life settings. This file type uses a lossy compression that messes up the details, especially around hard edges. For most purposes — especially for higher-resolution pictures — this is hardly noticeable. The compression used helps to keep the picture file size small. This is great for web pages. This format is not recommended for line drawings, graphs or other simple graphic images with lots of hard edges and large flat areas of a single color. The other two formats can sometimes have similar, or even smaller, file sizes for this type of image, but far better quality than jpg. Also, jpg is lousy at representing solid areas of bright red. Almost invariably, bright red becomes muddied by the jpg format. Exceptions exist in photos where the red is not a single, solid color.
The gif format can be used for simple graphics and even pictures with a transparency layer. This maintains a small file size by restricting the palette to 256 colors or less. Sometimes you can get away with reducing the number of colors to decrease the file size even further. This format achieves shades of color by a process of dithering. Sometimes the dots of color create a pleasing pattern; sometimes not.
The png format is the highest quality of the three types. Of course, this results in far larger file sizes for photographs. For simple art with text or other hard edges, this can greatly improve the quality over jpg and sometimes even over gif. This format also has the ability to include a transparency layer for non-rectangular images. For charts and graphs, png may result in a smaller file size than jpg, yet deliver greater quality because of the lack of jpg’s lossy compression.
Summing it up
Pictures really are worth a thousand words. With them, you can set the tone of a web page and make it come to life. Following these rules will help you boost your visitors’ user experience and also help to keep you in good standing, legally.
Ready to take the next step, and launch your MVP? Drop us a line. Our team of ex-Googlers can help you every step of the way, from design, to engineering, and all the way through product-market fit.