Optimizing Images for the Web

Slow websites are a huge pet peeve of ours. There’s no excuse for them, they break user expectations, and they cost you search engine trust in doing so.

One of the biggest culprits for making a website slow? Big, huge, powerful, sluggish images – most of which come right from your expensive digital camera (or even a recent smartphone) with no love given to them. Stop that. Here’s how.

There’s no excuse for too-large images on your website!

They do nobody any good. Sure, Digital SLR cameras and other previously-exclusive equipment has come down in price recently, and having good imagery is important… But that really doesn’t play nice with the key facts:

Even super-HD monitors, like 4k screens, only have so much resolution on them. The images you’re unleashing on the web directly from that fancy DSLR can be as much as 4 or 8 times the size of the monitor they’re displayed on! This means they have to be shrunk down, and lose information anyway.

On the off chance your use of these images is in a gallery or other high-value content collection, there’s still a solution: create a small version of the image to act as a preview, which then links to the full-size image itself. This way, those invested in getting access to the bigger file can do so – and others don’t need to worry about their connection being bogged down with loads of data.

If you have any control over your website’s content, it’s worth spending the very small amount of time it takes to get sizing right for that content.

Finding the right size to use is easy, too!

While there are a number of services you can use on the web which help with this, two of our favorites are Placehold.it and Placekitten. Because who doesn’t love kittens?

Either one – or any alternative you prefer – gives you a very simple method of using links to find the right size of picture to fill a space.

For example, using Placehold.it to generate a url like this: http://placehold.it/350×150

Delivers a plain, grey image like this:

Easy peasy.

Prefer kittens? Drop http://placekitten.com/800/400 into your image source, and voila:

Aw.

Fiddle with the sizing until you have something that works for the content you’re putting the image into.

Now that you know what kind of space you’re dealing with, you can cut your pictures down to a similar size (even 10 larger may make sense, if you’re using a responsive design website, but have a smaller monitor or laptop).

Resizing images doesn’t require fancy software like Photoshop any more.

And it hasn’t for a long time. Websites and free programs exist all over the place that help you do this work.

If you run Windows, then Microsoft Paint will probably do just fine! Resizing images takes a couple of clicks. Mac users can get by with iPhoto, if they’re tied into the App ecosystem even a little bit.

If you’d rather do things online, there are also a number of web services to help. Tools like Pixlr, shown below, give you access to a bunch of tools at a beyond-good-enough level to make deeper adjustments to your photos before uploading them to your website.

Lots of web services exist to shorten this path – especially if you want to complete simpler tasks, like just resizing but not retouching images. Image Optimizer and Resize-photos.com are two examples of simpler tools; just throw them a file, and a size it needs to be, and they’ll spit out a result.

You owe it to your visitors to keep your website efficient.

Whether you built the property yourself, or an agency like us designed the website for you – making the most of that time and effort investment, especially for promoting a business, means being aware that your input to the website changes how everyone sees it.

No one likes to see a website get old and broken faster than it needs to be. Monstrously huge images make websites break down far faster than you’d expect.

Source: Hello BLOG