Picture Perfect: Web Images 101

a snowboarder in midair jumping off a snowy mountain

3 Tips for Upping your Image Game

Visit just about any website and notice the first thing you see. It’s likely an image. Images drive web pages, so knowing your stuff when it comes to using images on your websites is important. We’ve put together a few of the practices we use when we build sites.

1. Don’t Steal

Did you know that most images online are protected by copyrights? This means that you can’t just use any image you find online on your own website unless you have permission. This includes images on social media and Google search. How do you avoid copyright infringement and get cool images for your site? Stock websites! There are TONS of free resources for stock imagery, illustrations, and even video clips. Unsplash, Pixabay, and Pexels are a few of our favorites.

2. Always Consider Size

When it comes to images for the web, sizing is everything. What to know is there’s a difference between file size and image dimensions. Dimensions are the length and width of an image, whereas the file size is made up of kilobytes (KB) and determines the data space used. Images that are too large in file size take a longer time to load, which slows down a page and reflects badly on your SEO rating. On the flip side, images that are too small or compressed will appear pixelated and blurry.

So what size images should you use?

To keep quality AND optimization, keep your images below 1MB and no wider than 2500 pixels. Phone images are typically large and can be up to 3MB in size. If you don’t crop and/or shrink them down before uploading, they could weigh down your site. Use a free image optimizer like Squoosh online or a program like Photoshop, Affinity Photo or even Microsoft Paint to check dimensions and optimize images for web. Also, remember to download medium-sized images from stock websites as opposed to the largest ones.

3. Stay on Brand

The images you use on your website should reflect your brand or company. Consider the tone you want to set with your pictures and narrow your search to those specific images, colors, and styles. If you have your own images of a product or service, ensure that they’re professional, understandable, engaging, and on brand.

Tell a Story

We mean this literally and figuratively. Your photo should visually tell a story that goes with your content, but don’t forget about providing alternate text or captions for the visually impaired. Accessibility is a huge focus for all technology right now, and alt text is important. Plus, it helps your SEO to be in compliance.

Interested in more info about accessibility? Visit Ada.gov. There are also plenty of professional companies that offer accessibility compliance services including live testing and audits. Contact us to talk about getting your site up to code.

Balance

Too much text is intimidating and, let’s be real, boring. Too many images are distracting and overwhelming. Find a good balance between your text and image use, and look for creative ways to incorporate pictures into your content.

Not sure if your web images are working for your website? Have a friend or coworker go through the site and make notes of their impressions. This will give you a better idea of what kind of mood or feeling your images evoke. Then, with a little formatting and optimizing, you’ll be set! Happy creating!

8bitstudio • For those with grand ambitions