Images can be an extremely useful way to add visual appeal to a website, or social media posts, and can also be used to effectively communicate ideas. But image use online can also be a source of issues, sometimes even legal issues, for information publishers. Your images either help your site look it’s best, or they can make a great site look terrible and unprofessional. In this article I will go over some tips for image usage, and pitfalls you should avoid.
The first thing you need to ask yourself before using any image is whether or not you have permission to use it. Too many times I see people with websites basically do a Google image search, and then grab whatever image they find that strikes their fancy. I cannot emphasize this strongly enough: DO NOT DO THIS. This can actually get you sued. Before using any image on your website, you need to make sure it meets one or more of the following criteria:
If you cannot answer “yes” to any of those questions, you should not use the photo. Period. Using it can get you in hot water legally, for copyright violation.
Once you have images that you have permission to use, think about their size and how they will be used on the website or social media profile.
A good rule of thumb for resizing images is that you can always reduce the size of an image (saving it as a new file first!!), by cropping it or reducing it’s height and width, but you cannot, nor should you, ever try to make an image bigger. If the image is not large enough to use the way you want to use it, just don’t use it. Just find another image that is an adequate size for that usage. Trying to enlarge a photo will result in it becoming fuzzy, pixelated and, in general, gross looking. Along the same lines, do not try to change the width of an image without also changing it’s height - keeping the same aspect ratio (ratio of height to width), so that you do not distort the image.
If none of this makes any sense to you - you should need to consider hiring a graphic designer who can help you with this.
While I’m on the subject of creating versions and sizes of images, you should get some good best practices under your belt for image and file naming. You should use all lowercase (including the .jpg, or .png extension), you should have NO spaces in your filename, and you should use “-” instead of “_” as separators between words (this will also apply to other files on your website). You should also have a naming convention that tells you something about what the image is, and how it can be used. Avoid things like IMG_4296.PNG. Instead use something more descriptive, like “birthday-party-kids-400x400.jpg” that way you can see all versions/sizes of the same image together in your directory, and pick the one that best suits how you will use it. **When resizing or creating new versions of files, always save as the new file before making any changes, to preserve your original.**
Images should enhance well-written content, not replace it. Avoid, at all costs, using images that have large amounts of text in them. A label here or there, or a spot ad, is ok, but just avoid having images replace your text content. Not only does it make your pages load slower, and, usually, look cruddy, but the text in those images is invisible to Search Engines, which will reduce your search engine rankings, and that content is also not accessible to screenreader for the visually impaired. Have your content be well crafted content, using HTML and CSS to style it, and let your images be window dressing to accent that content. If you absolutely must have a large image, like an infographic, have the content as HTML/CSS on your page, and have the graphic, itself, available as an image or PDF download link.
Hopefully these tips will have you well on your way to having a visually stunning website or social media presence!