When working with images on your website, there are many mistakes that you can make that will make your website look unprofessional or broken or even get you into legal trouble. This guide will go over three common mistakes I see beginners make when adding images to their websites.
Mistake #1: Inconsistent or Incorrect Sizing
When adding an image to your website, you want to ensure that your image will display properly at all screen sizes that you will display your image at. For desktop sizes, this means that your image should have a width of at least 1920px if your image will stretch the full width of your screen. For mobile, you probably want to have an image width of at least 750px wide to ensure that the image displays properly on even large phones without any visible pixellation or blurring. If your image won’t stretch the full width of your site, you’ll want to ensure that the image is at least as wide as the widest container it will be placed in.
Another common mistake is not properly sizing images that are placed next to each other to have the same size. When displaying multiple images in a row, all of your images should have the same width and height dimensions. Having different dimensions for each image can cause one image to appear taller or shorter than the others and can potentially put your content out of alignment.
To resize your images inside of WordPress, upload your image to the media gallery. Then click on the image you uploaded and find the “Edit Image” button. Use the Crop tool to select a new area of the image to display and click on the Apply Crop button to crop to your selected size. Then in the top row of buttons click on the Save Edits button to save all of your changes.
If you find that your image is too large to crop, you can start by using the Scale tool to reduce the size a bit to keep more of the image’s content, then use the Crop tool to grab an area that exactly matches that of the size that you need. Using these two tools together will help you get the perfect image size for your website.
If you’re not using WordPress, you can use the free Resize Image website to scale and crop your image. If you need to scale your image, start by using the Resize Image tool, then use the Crop Image tool to get the perfect size of your image for your website.
Mistake #2: Not using proper alt text on images
Alt text is text that describes the contents of an image so that users who are using screen readers can understand what your image is trying to convey. A screen reader user is someone who is using assistive technologies to read a website aloud, including any alt tags that you place on your website.
A common mistake is forgetting to put alt text in place for all of your site’s images. Fortunately, WordPress makes adding alt text to images easy. To add alt text to an image, go to your WordPress media gallery and select an image. Then find the alternative text box and and type in some text that describes the visual content of the image.
It is important to add alternate text so that screen reader users can understand the contents of your image. This text may also be referenced by search engines to understand the contents of your images, but you shouldn’t use this text to try and improve your SEO because its primary purpose is assisting with accessibility.
Mistake 3: Not getting proper permission to use images on your website
If you do a Google image search, you’re likely going to see many images you may want to use on your website. However, I would highly advise against using any images found via a Google search on your website. Just because an image is shown on Google doesn’t mean you can use it free and clear. In fact, there are many companies that sue websites for using their images without permission.
So, if you want to use an image on your site, what are your options? The first is that you can take a picture yourself. While this option is free, not all of us are master photographers so this won’t work for everyone.
The next option is to use stock photography. You can buy stock photography from many sites online, but it can be pricey. A better alternative is to use free stock photography from sites like Unsplash and Pixabay. However, a word of warning: while many images on these sites are free, not all of them are. Don’t just right click and save any image you see, since they do have some free images mixed in with paid images. Instead, click on the image and click on the green “Download” button that the site provides. If the site has a green download button, it should mean the image is available for free use. Be sure to check the license terms and conditions when downloading an image to see if you need to provide attribution or a link back to the photographer when using the image.
Another great place to get free images is via the many AI platforms that are popping up. One place where you can generate images is on Gab.AI which lets you create AI generated images for free. Whatever AI platform you use, be sure to check their terms and conditions to see if you can use their images on your website.
Conclusion
Following the above steps will help you display images professionally on your website as well as help to keep you out of potential legal trouble. If you have questions about managing a website or adding images, feel free to reach out to us or schedule a free consultation to learn how we can build you an easy to manage WordPress website.