With the slew of site launches I’ve seen over my two and a half years at Lucid Agency, I’ve noticed a recurring disconnect between imagery needs, requirements, and a general understanding of the image and its place in the world wide web. So, this December, during our monthly Breakfast and Learn (30-60 minute sessions where we take turns sharing knowledge, inspiration, and encouragement while nomming on some morning goodies), I decided that we as a company should get on the same page. Now I’m here to let you in on the basics.
CHAPTER 1: TMI on File Types
Every file has its place.
Joint Photographic Experts Group
This is our standard and generally recognized image type. We like JPGs (or JPEGs) because they can be compressed and crunched down into a super small file sizes, without ruining the quality of a photo.
GOOD FOR: Web photos. The potential for an itty-bitty file size helps load time and still renders nicely.
BAD FOR: Logos and graphics. JPG compression creates jagged lines and doesn’t allow for transparent backgrounds.
Portable Network Graphics
PNGs are pretty great because they give us a full range of colors. That said, they don’t compress as small as JPGs, so we don’t want to use these for photographs. Still, they’re better than a GIF for logos and icons with transparency needs (more on that in a minute).
GOOD FOR: Graphics and logos. They compress decently and allow for transparency.
BAD FOR: Photographs and print use. Restrict PNGs primarily to web use.
Graphic Interchange Format
GIFs actually came before PNGs in file creation history, but I’ll spare you the details of that juicy subject. There are a lot of similarities between the two, but given GIFs limited color range, PNGs reign supreme when it comes to logos and icons. GIFs also aren’t the best at compressing so nowadays we mostly use them for goofy animations.
GOOD FOR: Animations.
BAD FOR: Pretty much anything else.
Tagged Image File Format
Now let’s get into the two types of files that you should never directly load to the web—the first being the good ol’ TIFF! This file is HUGE because it holds a bunch of details. It’s great for photographers when they’re trying to edit crazy imagery or create composites, but these should always be converted, compressed, and formatted before making it to your site.
The OG File
Number two on the “do not use” list. This is basically the raw image file that comes straight out of the camera if you’re not shooting with compression. This file has all the data; data that we don’t need when we’re loading content to your site. We need the minimum viable product. This is great if I’m editing your photos, but it will not make it to the site in this format.
CHAPTER 2: WHAT IS COMPRESSION?
I’m so glad you asked! In this next chapter, I’ll go over that word I keep using when talking about file types.
NO, SERIOUSLY, WHAT?
Basically, compression decreases a graphics file size in bytes (rather than dimensions), without degrading the quality of the image to an unacceptable level. Good compression lightens the size of the file without the user noticing the difference.There are two types of compression. If you’re compressing on your own, you’ll want to know the difference so you choose the right option.
Lossy compression groups redundancies in color and shades so your file doesn’t need to communicate every pixel of the approximately one zillion pixels in the image. Instead, it’ll take a bunch of the repetitive green color in that shirt of yours and group it together as one piece of information.
You don’t want to use this for web imagery. This is for temporary compression of files so you can send a smaller zip or file to your coworker, but they don’t lose any information in transit. Get it? Lossless.
Why go through all this effort? Well, in the Internet age we live in now visuals are pivotal! They help support your message, break up content, and illustrate your process and projects. So, if you’re going to have a site inundated with imagery, it’s going to get heavy very quickly if you don’t optimize those file sizes. Heavy sites lead to slow load times, and slow load times lead to poor SEO and bounce rates—not good for conversion.
OKAY, SO HOW?
Well, if you have Adobe products, then it’s all in the export. For Photoshop or Illustrator, head to Save for Web and export your image in the right file type there. If you have a lot of photographs, I suggest Lightroom for massive exports; their basic export function allows you to customize the sizes before saving them all at once.
BUT IF I DON’T OWN ADOBE, THEN WHERE?
There are a lot of free compression tools on the web. If you want to pay a little money, I seriously suggest Kraken.io. If paying for compression isn’t your jam, I typically use the following:
Great for multiple files, you can compress up to 20 then download as one zip.
The PNG counterpart.
If you want to resize your images before compressing—which you should if your image has 4000px width—then this is your space.
CHAPTER 3: A MOMENT FOR RETINA
Retina screens are double density, which means that everything renders much crisper than on a regular screen. This is a problem for compressed images, though, because it means that images and logos can come across as fuzzy. However, there is a way to combat this. If you have an image that’s going to fill a 300px by 200px space, resize it to 600px by 400px before compressing so it’s two times as dense. Just make sure not to increase the size of an already small file to do this—it won’t work, I promise you. If you can, use SVG (a fully-vectored scalable file, albeit a little heavy) for logos and icons, I strongly suggest it.
CHAPTER 4: CROPPING & RATIOS
Technically, you can crop images in whatever way your heart desires. That said, I urge you to stick with recognizable ratios so that alignment stays clean, best practices for framing can maintain their integrity, and your site has design consistency throughout.
Typical ratios are as follows:
This came into play during the days of the twin reflex cameras and has stuck around ever since.
This is your standard ratio if you’re shooting with a digital point-and-shoot. Also, this is the sizing for most medium format film cameras.
3:2 or 6:4
35mm film brought this ratio to the table decades ago.
This is incredibly common and a default crop for most images. I have to be honest, I have no idea who came up with this aspect ratio or when.
A lot of HD imagery and video is in this aspect ratio. For the web, I typically suggest it for big backgrounds or header images.
Panorama-photography made this one popular. This is great for shorter header images and backgrounds.
CHAPTER 5: HERO IMAGES, A PSA
Images, like the rest of the web these days, respond. Full-width imagery is a very popular element affected by this responsive web. We hear a lot of requests to move images over a couple of pixels, so Margot’s face isn’t behind text or the colors don’t interfere with legibility. There are definitely restraints to the hero image pixel pushing, but I’m here to give you some tips to combat this with forward thinking.
1. USE AMBIENT PHOTOGRAPHY FOR HEROS & BACKGROUNDS
Save space in the content itself if you want to feature a bio photo or keep all the details of a beautiful landscape. If there’s going to be content over an image, or if it’s going to be full-width, make sure it’s more expressive and the photo doesn’t depend on one subject on the far left side of the image to make sense.
2. IF THE HERO OR BACKGROUND IS A CONSISTENT ELEMENT ACROSS THE SITE, MAKE SURE ALL THE PHOTOS ARE FRAMED SIMILARLY
This way developers and designers can create a consistent, responsive structure to the templates and the images have predictable rendering on different devices.
3. IF YOU DO CREATE A SIMILAR STRUCTURE IN FRAMING, TALK TO YOUR DESIGNER OR DEVELOPER ABOUT HOW YOU WANT THOSE PHOTOS TO POSITION
Is the subject matter typically on the left side? Let your team know! They can create a positioning that caters to that framing.
CHAPTER 6: SO YOU DON’T HAVE PHOTOSHOP
Not having access to a photo editing software can leave you a bit vulnerable. If you want to edit pictures on your own but don’t have the funds to get software (because who does?), here are a few free solutions: