Using Graphics In Your Website

What you start designing your website, it can be tempting to put a lot of graphics on it.  You need to be careful about graphics and use them correctly, though, to avoid a problem of slow page load time, and confusing your visitors.  Let’s dive into those things.

PAGE LOAD TIME

Your page load time is how fast it takes for your site to show up on your visitor’s device.  Your pictures take much longer to transmit than plain text, so the more pictures you have, and the more detailed the file is with data, the longer it takes.  That all said, there are a couple of ways to reduce page load time.

1. LESS PICTURES

One way to cut down on page load time is simply reducing the number of pictures.  For example, if you have a slider, don’t load up 9 slides and overlay them all with a bunch of dense text.  I’ve seen this done, and it’s like trying to cram an entire website into a slider.  It just isn’t something I personally recommend in almost any situation.

One case where you can’t necessarily cut back too far on the number of images is a picture gallery.  In the case of a gallery, the rest of the steps below become even more critical.

2. RESIZE

Often, modern digital cameras take extremely high resolution pictures suitable for printing out as a photo.  That’s great if that’s what you’re going to do with them, but on a website, you don’t usually want that high of a resolution.  In fact, you want to get the resolution to the bare minimum that’s still going to look good on a typical screen size.  When working on several pictures such as for a gallery, you might want to check out IrfanView.

3. EWWW Image Optimizer

This handy WordPress plugin will create multiple versions of each image in your library, and then deliver lower-resolution (less pixels) versions of your images if warranted.  The downside to this is that you end up with a bigger file folder due to the additional images, which will use more of your allowed storage space and make your backups bigger.  This may or may not be an issue.

4. RE-SAMPLE

Use a tool like either JpegMini or Kraken to resample your images.  What they do is fairly technical, but the idea is that they look at the colors in the image and find ways to do some averaging on things and reduce the overall number of pixels, but in ways that the human eye cannot often see.  For example, if there are hundreds of shades of yellow, you can imagine that many of them would be so close you’d have to look extremely close to tell the difference.  So these programs look at pixels that are right next to each other and if they’re only slightly different, it might blend them together in a way that makes the file smaller.  There are also lossy and lossless options, but I’ll save that for a rainy day.  I often get anywhere from a 25-50% size reduction.  Well, if a picture is half the size it used to be, the new smaller picture will now load twice as fast as the old one – and you probably won’t even be able to tell the difference.

JpegMini does the work off-line on your computer prior to uploading, while Kraken is a pay-per-month service that does all the work in the cloud and automatically optimizes any new images that you may add.

5. CACHE

If you aren’t using a cache, you need to be.  These come in different types, and it’s quite a discussion of its own.  For now, the important thing to know is that by using a cache, your website will be served up even faster still.

USING PICTURES PROPERLY

Too many pictures on the page will pull your visitor’s attention in multiple directions.  Usually, a web page should be funnelling your visitor toward taking a specific action.  If their attention is going in multiple directions, though, they may become a confused buyer, and confused buyers don’t buy.  Your pictures should either part of your overall story, in which case they need to be layed out in a way that flows properly, or parked in properly strategic places, such as where you expect to see a company’s logo.

You need to also be mindful about colors and your overall page composition.  Everything needs to all look good together.

Pictures can either showcase your best work, illustrate a problem to grab their attention, or be used as part of a discussion about your materials or work processes.  Which is best really depends on the purpose of that particular web page.

Thanks for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s