This post kicks off a new series, “From the Help Desk,” where we explore some of the questions seen in the support queue.
One of the most common issues we see day-to-day has to do with images. Specifically, “What size should my image be?” Sometimes this is accompanied by, “Why don’t my images show up?” While we have a checklist for helping to ensure your images are all set for the web, I’d like to call out the main culprit: your digital camera.
Whether it’s a point-and-shoot or a fancy DSLR, your digital camera does not take web-friendly images. (Unless, of course, you’re still using that hot ticket from 1996.) Your camera's images are meant to be printed. Printing requires quite a bit more detail than displaying an image on a computer monitor. More detail equals more data, which equals larger file sizes, which, of course, equals slower load-times on your website.
Since you want your images to display nice and crisp, think pixels. And to think pixels, you also need to think photo editing. You'll need to use an image editor to get the most of your photos and we have a few recommendations.
Once you have your image-editing program of choice, open it up and decide how large (in pixels) you want your images to appear on your site. For content areas look to the column widths you’ve set in the Style editor. For picture galleries, look to the maximum width you’ve set in the gallery properties. (Hint: unless you’ve changed it, the default max is 1200 pixels wide.) Once you’ve determined your picture widths, save your images to be no larger than that size. Be sure your pixels per inch (PPI) are set to 72, as this is the most common pixel density for screen display. The result will be a crisp image that loads quickly.
While we’re on the subject of saving images, the other common issue we see has to do with files that aren’t images at all. While PDF and Word documents may contain images, they are not a valid image format and (most) browsers will not display them. We recommend you use one of these 3 file types: .jpg, .png, or .gif. You can convert non-image files to one of these formats using the programs I mentioned above. After that, you're good to go.
For more help with images, visit our help site, contact support, or sign up for our “All About Images” workshop.