images and how to use them

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.

Permission

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:

• Did you take the photo or design the image yourself?
• Did you purchase a license for the image on a stock image website, like iStockPhoto.com or Dreamstime.com?
• Did you get permission from the photographer or graphic designer to use the image
• Did you find the image on a site like CreativeCommons.org, and does the image have an explicit designation that allows you to use it as you wish?

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.

Image Sizes and Image Sizing

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.

• • If you are intending to use an image as a profile photo or header photo on social media, make sure you understand the dimensions required of those uses, and how they will need to be cropped to not lose vital pieces of your image.
  • If an image is just a small accent image with text wrapped around it, you don’t need it to be huge, and using a huge image and merely resizing it in your HTML or CSS code, will result in a page that takes longer to load than it should. Consider creating specific sizes of images, cropped or resized to specific dimensions for specific uses. For instance, if you have a set of image that will be tiled across your page, as thumbnails, header images, or some other use, make sure they’re all the same height and width, so they will tile neatly, and save them as separate files, with either the dimensions or usage in the filename (i.e. “this-image-200×200.png”)
  • If an image is to be used in a slider, or a parallax background, make sure that image is the appropriate size required by that usage, before beginning – preferably when choosing a size to download/purchase.

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.

Image Filenames

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-400×400.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 Highlight Content – Not Replace It

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!