When working on a website build, typically some or all of the images for the project are “provided by the client.” This is one way to save some money on the project and in some cases, you are the only one who could effectively find them. Whether it’s product images, photography of your facility and employees, at some point you’re almost certainly going to be asked to come up with some images.
If you aren’t familiar with graphics and all that stuff – it can get a bit confusing. Optimizing images? Aspect Ratio? JPG or PNG? What the heck are they talking about?
In these examples, I’m going to be using WordPress as our guide – most of the time, we use WordPress as the platform for our clients because it is flexible, efficient (if you know how to set it up), and scales well to nearly all needs. About one in every three sites on the web uses this platform. Many of these concepts will work well for other platforms as well, though.
What Are Aspect Ratios and Why Are They Important?
In technical terms, the aspect ratio is the comparison of the width and the height. Using television as an example, old TV sets before the era of HDTV had an aspect ratio of 4:3. No matter how big the screen, the height of the screen is 0.75 (3/4) of the width. If your screen was 12 inches across, it would be 8 inches tall. 16 inches across would have a height of 12 inches. Wikipedia has a bunch more technical information available about aspect ratios, too.
If you’ve watched an older television show on your HDTV (which is typically at a 16:9 aspect ratio) you are familiar with the black bars on either side. This is because if the image was zoomed in to fit the width of the screen, portions of the top and bottom would be cut off. In some cases you can set the image to “stretch” to the full width to match the aspect ratio of your television set, but then you end up with everyone looking like they’ve put on a few pounds and everything in the image is wider than it normally would be. You could also set them to “zoom” in and loose the black borders, but the tops of everyone’s heads and their feet get chopped off.
In most web projects, it’s not so much which aspect ratio you choose as it is about being consistent with them once they are chosen. If you are inconsistent, you end up with the same sort of situation we described with the televisions above. You can work around it a little bit, but it invariably means that there is going to be extra white space or cropping out of portions of the image.
In some cases, such as the header image on this site, cropping happens no matter what when it comes to converting things to mobile. If we left it so the whole image was visible, the height would be very small and the image would be hard to see. By understanding how images are cropped or scaled when switching between different devices, we can come up with a plan on how to choose the images.
Inconsistent aspect ratios are especially noticeable when trying to lay things out in a grid like with your product listings or blog posts page. In order to make the columns all fit the width, you end up with a bunch of ugly white space around everything if your aspect ratios aren’t the same.
WordPress and your designers can sometimes come up with some tricks to fool the eye and make this less noticeable – but there are sacrifices to be made in such cases. For example, in the image here, option “E” would almost certainly need to be cropped in order to make things lay out nicely. Much of the top and bottom of the image would need to be scrapped. Meanwhile, image “F” would likely need to be cropped on the left and right to fill the space appropriately and not end up so small that you couldn’t see it.
Optimal Image Sizes
Once you’ve come up with the aspect ratio (or sometimes multiple ratios will be chosen for different sections of the site) you have to consider how big things are. Smaller images are faster to download, but larger images look better on a big screen. The trick is finding the right balance.
If you have a good quality digital camera (or even a nice cell phone) the pictures that come off it can be HUGE – 4000 pixels across or more. For printing images, this is great, but for the web, it’s overkill. Even the highest setting on most desktops isn’t typically set to anything larger than 2000 pixels wide.
If the images you’re going to be using are for a grid layout and will never be seen full screen sized, then making them larger than they need to be on a large screen is a waste, too.
WordPress helps us a bit in this area by creating multiple versions of each image when you upload it. If you click the image here, you’ll see that it scales up and you can see it full sized, but if you never click it – it only downloads a smaller version of itself to save bandwidth and make the downloads go faster.
As a general rule of thumb, I always suggest to clients that the largest version of the image should be no more than 1600 pixels wide. This is large enough to cover the width of most screens (and it doesn’t blur out too much on larger ones). Once optimized, it’s a fairly decent download size and you still get some great quality.
In most graphics editing programs, there are several ways to save the images – and a number of different formats that you can save them in.In most graphics editor programs, you will see a “Save for Web…” option under the “File” menu. From there, you can select the type of image (see “Image Formats” below) and the settings. Some will provide a preview.
- DPI (Dots Per Inch): For print, we typically see a number of around 200 dots per inch. On the web, we typically use 72dpi. Adjust this number to 72. You’ll get good enough qualify for the web and not have a lot of wasted pixels that won’t ever get rendered.
- Compression Levels (Image Quality): Typically (for JPG files, especially) you have some options for compression levels or image quality. Compression Level is typically a “low to high” scenario with low levels being better quality, but larger download sizes. Image Quality is the same thing, but backwards. High quality means lower compression levels. It can be a number from 1 to 100 or sometimes it will use words like “low,” “high,” “very high”, etc. The idea here is to pick something around the 60-80% range -a fair trade off between compression levels and quality.
Notes on Compression Levels: If your image has text and/or crisp straight lines in it, you will want a lower compression level/larger file size. Compression “blurs” things slightly, so the more compression you add, the more blur. Most images that are photographs without crisp lines can be compressed at a much higher level before you notice the blurring effect kicking in.
Though there is a new format of web images called “webp” which has amazing compression levels but it is not fully supported in all graphics editors yet. These can be a great choice if you have the ability to work with them. If not, you have two more traditional choices along with a third for special circumstances.
- JPG (or JPEG): This is the standard format for normal images without transparency.
- PNG: Portable Network Graphics file format supports transparency so you can see “through” portions of the image to what is behind it. This format is larger than JPG images, but is useful for logos or other graphics with a background that has been removed.
- GIF: These files are very large and only support 256 colors. They can still be handy to use once in a while if you have an image with some animation going on. Typically you won’t be saving images in this format, though.
Still Confused? What now?
Graphic design is a complex skill. It’s not just art, but a lot of technical information all mixed in, too. In fact, I run into situations when dealing with highly trained graphic designers from the print world who have trouble wrapping their heads around some of the various differences between print and web design. It’s not easy, but it can be learned.
In some cases, though – especially if a slick and consistent look and brand message are important to you, it might be worth your time to pay a professional to crop, scale, and optimize your images. It can seem pricey on the surface, but once you’ve tried it a few times, you can see that it takes a good eye, careful planning, and a knowledge of the tools you’re working with to make it all come together.
Over the coming weeks and months, I’ll be posting more here at Equestics to help those who want to save the money and take the time to learn more about the basics of image optimization and prepping things for the web. I’m talking to various graphic designers now in hopes of getting them to contribute some articles to help you, as well.