Size Matters: Optimizing Images for the Web

With all the fancy content management systems out there making it easy for users to manage and update their website, suddenly creating new content and pages on your site becomes a snap, and anyone can do it. While CMS's like Joomla empower those outside the professional web design field to completely turn their website into a living, breathing dynamic canvas, there are still a few simple best practices that one might not know without a little experience. One of the big ones that often get missed are images.  In this article, we'll show you how to work with images for the web so you get the best results possible when putting pictures on your website.  This will apply to blogs, social media, and just about any other method of publishing on the web.

The Good, The Bad, and the Too Large

Today, we're living in a Renaissance as far as digital photography goes.  Digital Cameras are priced very reasonably, even on the high end, and lower-end consumer models are often pretty decent as far as image quality goes.  Even the cameras on popular smart phones like the Apple iPhone, Motorola Droid, and Sprint HTC Evo are creating large, sharp images that are actually far too big for the web. To get technical on you, an 8 Megapixel camera produces an image that's roughly 3264 pixels wide, and 1952 pixels tall (depending on the aspect ratio).  A decent widescreen LCD monitor displays an image that's 1920 pixels wide and 1080 pixels tall.  Some screens have a lower number of pixels while others are almost double that of the average.  A high-quality printed photo of that same image will only be about 10 inches wide and 7 inches tall.  What does all this mean? If you are taking an image from a digital camera, chances are it's way too big for the web, even if your camera is a few years old.  Fortunately, it's easy to fix this long after you've taken the picture, so keep using your camera on the best settings possible; you never know when you might need to use an image you take in a printed environment that requires the higher resolution.

Post Processing Vs. HTML Resizing

If you are familiar with Joomla, you probably have already tried resizing the image just by dragging the corners to shrink it right on the page.  It's quick, it's easy, and sometimes it doesn't look too bad.  The problem with this method is that it doesn't actually resize the image, it just displays it at a much smaller size.  Let me show you a quick example to portray the difference.  Two weeks ago the company went out to Applebees after an exceptionally hot, busy week to unwind.  I took a shot of the festivities with my HTC Evo Smartphone's 8 megapixel camera.  I've uploaded the full size image and used the HTML Resizing capabilities in Joomla for the first example, and resized the second example in photoshop before uploading.  Click here to see the pretty obvious results. Notice the first image took a lot longer to load.  On a slow connection, a user could wait for over a minute just to get that image.  In some older browsers, the first image may also look distorted and grainy.

So now we can clearly see the problem.  While a lot of times, the situation isn't quite as extreme as my example, it's simply a best practice and a golden rule to always optimize your images first.  It's quick and easy:

Optimizing Images for the Web

So let's say you've got a great photo taken of a product or event, and you want to stick it into your blog. You'll want to resize it first.  You don't need an expensive application like Adobe Photoshop to optimize images for the web.  In fact, with the marvels of technology, you don't need anything more than a web browser!  There are many great (not to mention, FREE!) apps that allow you to do anything from simple image resizes to full-fledged photo manipulation.  One simple to use service that I really like is Picnik.  There are others that aren't quite as flashy, but Picnik offers a lot of great features and an easy to use interface.

Go to www.picnik.com and click Get started now!

Once Picnik finishes loading in your browser (it only takes a few seconds), click the Upload a photo button.  Browse to the photo on your computer (or network, camera, thumb drive, etc) and upload it.

Picnik will load your image.  You have a list of tools at the top, like Auto-fix, Rotate, Crop, Resize, etc.  Let's crop our image first, so it's not so tall.  Click Crop.

We can eliminate some of the extra space around the subject and focus on what's important.  Just grab the corners with your mouse and drag the rectangle into the position you want.  Anything outside that rectangle will be removed when you click Ok.

Even though we cropped our image, it's still huge.  Let's resize it.  Click Resize.

You need to know how big you want your image.  The unit of measurement is in pixels.  A good example is a lot of modern websites are normally around 960 pixels wide (Directive.com being no exception).  Click the chart below to see an Actual-Size guide for a few examples of widths.  This will give you a comparison of a few sizes and how they look on your monitor.

It's not a bad idea to keep a standard size for images in some situations.  You may have a few images laid out on your home page that would look much better if they all had the same width and height.  Resizing to a particular height or width will then give you the flexibility to crop the image to match any proportion you want.

So we're going to crop our image to a healthy 260 pixels wide, and let the height figure itself out on it's own.  If you are more of a percentage person, you can also type in percentages to shrink the image down.  Be sure to always have Keep Proportions checked!  Click Ok when the image looks good.

Now that we have a much smaller image, let's Save it.  Click on the Save & Share tab at the top.  Here we can name our file, choose the format, and set the compression quality.  You should choose JPG as the format, and set the JPG Compression Quality to 8, which is a sweet spot right in the middle of good quality and small file size.  Finally, click Save Photo and save it to your computer.  Be sure not to save it over your original!  You never know when you might need that larger file again!

Once saved, you'll have an image that won't need to be adjusted or resized once you upload it to your website, which means better load times, and a lot fewer issues in the long run!