Warning: If You Put Photos On Your Website, They May Cause Problems

It’s so exciting to build your own website! You’ll have a feeling of accomplishment when it’s done, and you’ll save lots of money. It’s great being able to use your own photos, right? You read somewhere that all you have to know is how to type a document with a computer and that’s it! Or is it?

The Slow Website Movement

But now your site loads more slowly than this guy talks. Forums everywhere, including the Genesis one I answer questions on, are littered with questions about this. Apart from having cheap and rotten website hosting (very common), there is one key cause: Those wonderful photos you put up there. How embarrassing is that? In fact, this page loads slowly because I’ve deliberately done wrong things here to illustrate my point. 🙂

Did you upload the photos directly from your camera without editing them at all? Oh oh. The normal size of a photo in your camera is usually enormous, way bigger than you need on your website. I’ll show you what I mean. Here’s Saffy at a pretty normal and good size:

saffy feels smart
Saffy, Ph.D. in Cuteness

Leon Saffy Is Getting Larger

Now let’s see what Saffy looks like at a very big size. By the way, this is still smaller than typical in-camera photo size. In fact, some highly geeky readers may notice that the image below is actually larger than what you’re seeing! That’s because my theme’s CSS code is shrinking it, so to speak. On other themes, the image may be covering up much of the sidebar – yuck.

If you click on her image below, you’ll see the Massive Absurd Size (some browsers will actually try to resize it for you – if so, try clicking again on the photo to see full size).

saffy feels smart

By the way, Massive Absurd Size can be just right if you want a large background image for the whole site. But not in a Page, a Post, or as your logo.

Why Should I Care?

Even if you like photos that are too large, or think that a too-huge photo that still looks OK is fine, think again. Google will penalize you for a slow-loading site. Your ranking may get worse. More importantly, visitors of slow sites get annoyed and leave, even if it’s just a few seconds, and of course they’re not telling you. So your site could become a ghost town.

What’s A Feline To Do?

Are you willing to learn and want to try editing photos? Here’s a nice free Windows program for that: Irfanview. Here are some ideas for Mac. I’m sure there are also phone apps that can be used for this, too.

Still want to magically fix this problem and aren’t willing to hire competent help or do some learning? 😉 If you have WordPress, you could try this plugin, which optimizes photos as you upload them, EWWW, possibly the best plugin name ever. No guarantees – someone with serious photo negligence can easily defeat any automated optimization.

Another Rookie Mistake

Here’s another photo. She’s gorgeous, and the photo is large, but not ridiculous-sized. Then what’s wrong? Very little – maybe nothing. But she illustrates another very common and much subtler mistake. Let’s say you have her photo at the top of your page. And right below her you have what you consider important ad copy, or the key text of your Post that you want people to read. If someone is viewing the site with a laptop or an iPad (or anything smaller), they won’t see your text copy without scrolling down. That’s a user annoyance. They may even be mesmerized into not scrolling at all!

If you scrolled down far enough to read this, please say "I did!"
If you scrolled down far enough to read this, please raise your hand.

In fact, she illustrates another point. Her photo is much taller than it is wide. This is “portrait” orientation. If a photo is wider than it is tall, that’s “landscape” orientation. Many of you out there are saying, “duh”, but here’s the point – let’s say you want to have a photo slider on your site like so many others do (in fact, now it’s an overused cliché). And you have a mix of portrait and landscape photos. This will NOT work in a slider, which needs photos that are all in the same orientation and edited to be the same size, or it will look horrible. For many people, this isn’t obvious.

Downward Slide

You might ask, can’t you edit the photos to get them to fit the slider? If they’re not in the same orientation, no way, not without cutting off huge portions of the photo to get them to fit, which will ruin the original photo’s effect.

There is one workaround I have used that may help. If you use a lightbox style photo gallery, it will have pop-ups that use the full screen, and may adjust enough to allow some orientation mixing. There are many lightbox implementations to choose from. But if the size and orientation differences are too extreme, it will still look awful.

Dirty Secret That No One Is Telling You

Notice that I haven’t even talked about poor quality photos per se, just wrong sizing and editing. Many clients want me to magically fix photos that are poorly lit, out of focus, over-exposed, under-exposed, TMI, or just esthetically bad in lots of ways. I have many editing tricks, such as the time a plastic surgeon asked me to retouch all photos of him to make him look younger (no, I’m not joking). But truly bad photos are beyond repair.

Not everyone is skilled at photography (except you, of course!). If your skills are iff-y, you should hire a pro photographer, especially if you’re going to use one of those trendy hipster themes that uses really huge photos in the background and elsewhere. The bigger the photo, the more obvious every small mistake is. As a compromise, you could also buy some quality stock photos (just like Microsoft sometimes does).

I hope this gives you some ideas you can use to improve your site!

 

2 Comments


  1. Hi Dave :

    Thanks for very informative, resourcefull guidelines. I think you have a very clear and simple way of getting these tech problems across.

    It really got me thinking about the struggles I’m currently experiencing. I need to load stock-photos as (1) display images only and then (2) the hi res image for actual client download.

    Could you please tell me the way to go here. From all the info and searches on the Internet I’m more confused and frustrated.

    And as you can see from me efforts so far, I have more of a mess than a shopfront !

    Please help.
    Thank you and kind regards.

    Reply

  2. Hi,
    Your link didn’t work, but it sounds like you’re a real person. 🙂 That’s a pretty big question, as the context is crucial for the answer. I have no context, so I’ll give a generic WordPress answer.

    When you’re editing a page or post in WordPress, the Media Uploader will allow you to choose “thumbnail”, or small, size for the photo that appears on the page. Then you can set the Link to be the full-sized image.

    When I’m blogging, I usually set the link to “no link”, because I only want the image to show on the page, not separately. Ironically, this Post is a rare exception to that. 🙂

    For some ecommerce plugin, the answer could be much more complex, and would generally be best answered by the plugin developer. They generally have built-in code to handle all that.

    Dave

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *