If you’re involved with producing content for the web in any way these days, you’ve probably had to deal with the issue of getting images to look good online. What seems on the surface like it should be a relatively simple process (choose image, upload image, place image, eat cake), turns out to have all sorts of complicated factors.
Where do you find a good image? How do you choose a good image? What file type should you use? What file size should you shoot for? What dimensions are best? What meta-information should you include? How should you crop the image? What type of screens do you need to account for? SO MANY QUESTIONS!!!!
One of our favorite clients recently wrote in with a question specifically about how to find the sweet spot between image size and image quality for web photos, so I’m going to dig into just that area for today. If you’d like more info on choosing a good image, check out my post from earlier this year on choosing good stock photography. Onwards and upwards!
Considering File Types
There are three file types to choose from that are supported everywhere — GIF, PNG and JPEG. There are some newer kids on the block, with fancy new abilities (WebP, JPEG XR), but since they don’t have wide browser support, we can safely ignore them for now. How do you choose which format to use?
If you need animation in your image, then you need GIF. If you don’t you can strike GIF off the list as well. Other than animating images, GIFs are no longer the best at anything. That leaves us with JPEG and PNG, and here’s where things get a little complicated. If you need transparency in your image, then you need PNG. Otherwise, the basic deciding factor for choosing between the two is whether you need to keep fine details in the photo.
PNGs use a lossless compression, which means they don’t reduce details, but the trade-off is much larger file sizes. JPEGs use both lossless and “lossy” compression to find a good middle-ground between quality and size. What this means is that most of the time, JPEG is going to be what you want if you’re trying to get image size down and you’re not a photographer who cares about the tiny details.
BUT!! There’s an exception. There are actually two types of PNGs, PNG-8 and PNG-24. If your image only contains a handful of colors, such as one of these flat-style vector images (like the one at the top of this post), then PNG-8 is actually your best choice, and will render the image in high-quality at very small file sizes. But that is not true for full-tone photographs.
Choosing Image Dimensions
This used to be a no-brainer. You made the image dimensions the size you wanted the image to be on the screen. Want the image to fill a 500px x 500px space? You need a 500px x 500px image. Simple. Then Apple went and invented the Retina screen, and the entire industry followed suit with a range of high pixel-density screens and made the whole thing a lot more difficult.
The issue arises because an image displayed on a Retina or high pixel-density screen requires twice as many pixels as a standard display to achieve the same quality at the same size. So if you wanted that 500px x 500px image to look good on a Retina screen, it actually needs to be 1000px x 1000px and then only displayed at 500px x 500px.
This leaves you with two choices. One, create two versions of the image, one for Retina screens and one for normal screens, and then serve the appropriate image to the appropriate screen. Or two, create the large size, highly compress it, and serve it to both. The first choice is the best, but many end users will not be able to setup the correct delivery on their own and are stuck with the second choice.
Adjusting Image Quality
Ok, so now you know which file type you need, and you know what size you need to make it, now how do you adjust the quality to get file-size down while keeping the image looking attractive?
If you’re using PNGs, there aren’t any further adjustments you can make on the quality size when outputting the file. What you get is what you get. With JPEGs, any image editor worth using will have a “quality” slider that ranges from 0-100. Use photoshop if you have it, but if you don’t, there are a number of online image editors that will also be useful (I recommend Pixlr).
There isn’t going to be one quality setting I can tell you to use for all images, because the quality settings have different effects based on the complexity, size and color-range of your image. You’ll need to experiment and see what works best for each individual image. Personally, I always try to keep file sizes for large images under 300k, but that isn’t always possible while maintaining quality.
Compressing/Optimizing Your Images
We’re still not done getting the file sizes of our images down! You can apply compression to your images after outputting them, using a variety of tools which squeeze every last bit of efficiency out of your pictures. If you’re on a Mac, my absolute favorite is ImageOptim, a tiny desktop app. You drag images onto it, and it spits out optimized versions in seconds. If you’re not on a Mac, try Trimage, which was inspired by ImageOptim, but works on all platforms. If you have a WordPress website, there’s an intriguing third option called Smush, which will do all of this automatically when you upload images into the media library.
In addition to compressing the content of the actual image, these programs also remove extra metadata that is just taking up space. Begone metadata, back to the fiery chasm from whence you came!
Boom! You’ve got yourself some sexy, slim images that will look good anywhere. Want to make sure the images in your website are small and good-looking? Give the design team at Solamar at shout.