The internet sure is a strange place. Those mysterious Google algorithms are constantly evolving, and user preferences change all the time.

One thing that remains constant, though, is the importance of using photos in website design. A picture may be worth a thousand words, but using a photo that’s grainy or confusing can compound problems on your site rather than solve them. Today, I’m going to share the top mistakes when it comes to using photos on websites– mistakes that you should avoid at all costs.

You know what– I might be doing these mistakes myself on my blogs, so let’s dig in…

1  Using JPEG File Format

JPEG is a common file format, but it isn’t always the best option. The format compresses images to reduce file size and save space on your hard drive, but it also reduces quality. If you’re going to be printing or displaying your photos in high resolutions, you’ll want to use another format like PNG or TIFF instead.

JPEG is a good choice if:

• You don’t care about image quality (or are using a photo that’s already low-quality).
• You need to send photos quickly (e.g., emailing photos to friends).
• You want to reduce file size for storage or bandwidth purposes — JPEG uses lossy compression, which means it will discard some detail from your images in order to shrink them down. However, this also means that different parts of your photo will be compressed differently; if there’s ever anything in your photo that looks too blurry when you view it at full size, chances are it was lost during compression and won’t be visible if you save as JPEG again later on (although there will still be some loss).

 2  Using Not Big Enough and Blurry Photos

How big is your photo? Are you using a high-resolution image or a low-resolution image? This may seem obvious to some but it’s easy to overlook when you have dozens of images on your site.

Resolution refers to how many pixels are in every inch of an image (so the higher the number here, the better). A high-resolution photo will be of higher quality than one with a lower resolution. File size refers to how large an image is on your website file system. When selecting images for use on your website it’s important that they don’t take up too much space because slow loading times can negatively impact user experience. Pixel Density relates directly back to resolution; being able to see more detail in an image means having higher pixel density which translates into clearer visuals for users when viewing them online.

That said, just make sure your photos are big enough and not blurry.

3  Not Enough Room To Breathe

Let’s take a moment to consider the images on your site. Are they being treated like the beautiful, delicate things they are?

If not, how can we help them?

As an example of what NOT to do: let’s take this website for a donation organization. The photos are small and cramped in an attempt to fit in more information on the page.

The remedy is simple! Just give those photos room to breathe. Give each image some breathing room on the page by making sure there’s enough space surrounding it so that it doesn’t feel squished or encroached upon by other elements around it. Give each image some breathing room in your layout by looking at how much distance you want between elements (like text and images). Give each image enough room so that every part of it has plenty of space—this includes both its background and foreground areas!

4  Inappropriate Colors

Unless it’s a purposeful design component, spare your site visitors jarring, bright colors. You’ll find that most websites have muted and soft tones that go hand in hand with their brands. This is because they know their audience and understand how to use colors to affect them positively. If you’re designing for a business or brand with an established color palette—something like Coca-Cola’s red, white and blue—stick to that palette when choosing colors for photos on your website.

5  Not Resizing/Cropping The Photo to Fit Its Purpose

Cropping and resizing photos is important because it helps you to remove unnecessary elements, which are usually the background or edges of a photo. Cropping can also make an image more visually appealing by emphasizing what actually matters in that specific shot. Resizing photos is equally important because it allows users to see those images clearly without having them lose their original quality.

For example, if you’re using an image for your website background or header, cropping out some parts from the picture before uploading it to your site will result in a better overall look when compared with using cropped images online that have been taken straight from their source files (usually JPEGs). The same goes for resizing: if you resize an image too much it could turn out blurry and pixelated, so make sure that you only resize them just enough so they’ll fit properly on whatever page element they’re going into.

There are several ways of cropping and resizing images. You can do this manually by opening up Photoshop or Gimp (free tools) and editing every single one yourself; however, this method is both time-consuming and tedious so we recommend using automatic tools like GraphicBurger’s Image Optimizer instead!

6  Going Overboard with Filters

When you’re adding filters to your pictures, keep in mind that it can look pretty unnatural if you go overboard with them. If you want to use filters on photos, try adding just one and see how it looks before applying more. An excess of filters will make your photos look blurry and unprofessional—and worse yet, they might give potential customers the impression that your company doesn’t know what it’s doing (or worse yet, that you don’t care about how things look). Going overboard with filters will do more harm than good.

7  Packing Too Many Photos Into One Spot On Your Website

Don’t pack too many photos into one spot on your website. If you have a lot of images, use the grid layout to give them space and structure. A photo gallery or slider can help keep the images flowing in an engaging way.

Carousels are also great for showcasing multiple images at once, while still giving each image enough room to breathe.

8  Not Being Mindful For Photo Placement

There are a few things you should always keep in mind when placing photos on your website.

• Avoid using multiple photos: Try to avoid using more than one photo on any given page, especially if the page is long. If you do decide to use multiple images, make sure they are related and don’t appear disparate from each other.
• Avoid placing photos at the top of the page: This may seem obvious, but we’ve seen some websites where their most important information is located at the bottom of their homepage! This just doesn’t make sense because users will have to scroll past everything else before they find what they’re looking for (which is not ideal).
• Avoid placing photos at the bottom of your webpage: Again, this may sound silly but some people think that they should put all their content below their tagline so that it doesn’t get cut off by someone’s browser window size being too small or large. The problem with doing this is that users will start reading before getting through anything else (like an introduction) because it was placed after everything else!

BE SURE TO AVOID THESE MISTAKES OF PHOTO USAGE WHEN PUBLISHING THEM ON YOUR WEBSITE

The first and most basic rule of using photos on your site is to be sure not to screw it up. This means:

• Don’t use too many photos. A good rule of thumb is not to publish more than three at a time, without sufficient breaks in between. You don’t want your visitor’s eyes glazing over trying to take everything in at once (and they will).
• Don’t use photos that are too small. While some people might argue that big is better, it isn’t always true when it comes to images, especially if you’re using them as links or buttons on your website or blog post. If the viewer can barely make out what the image is supposed to show them—or worse yet if they can’t figure out which part of the image does what—then chances are good that they aren’t going to click on anything but an “X” button instead!

With so many potential pitfalls, you might be thinking that it’s best not to use any photos at all on your website. Just imagine a world with no graphics at all—it would be as lifeless and sterile as a hospital room. And just like with hospitals, sometimes too much of a good thing can hurt you; we don’t want to discourage you from using images where you might benefit from them. Instead, think of this blog post as more of an insurance policy for your online image. We’ve given you all the tools you need to avoid going down the wrong photographic paths, so all that’s left is for you to apply them properly!

Avoid These Mistakes With the Help of An Expert

When it comes to web design, there’s a lot that can go wrong.

With so many different elements coming together in a single website, it’s easy for something to slip through the cracks. And no matter how great your website looks, if it’s not usable and easy to navigate, it won’t do you any good.

That’s why we’ve put together this list of usability mistakes you should avoid when using photos on your website. And with the help of our expert, you’ll be able to avoid these mistakes and make sure your site is as user-friendly as possible!

Related: 5 Things Every Great Home Page Has! Strive Enterprise Website Tips & Tricks Blogs

Subscribe to Jose Silvera’s YouTube channel and get our Website Tips & Tricks twice a week, live!

Get the Best Web developers & Online Marketers in Las Vegas, Nevada!

(833) 886-2681

Strive Enterprise Official Website

Check out our Portfolio

We Also Offer Digital Marketing For Small & Big Businesses, SEO, E-Commerce, WordPress, PPC Campaign Development & Management for Google, Bing & Yahoo!, Facebook Ads, and more!

We wish you great success!

See you soon!