OPTIMIZING YOUR PHOTOS

FOR BLOG POSTS & SOCIAL MEDIA

INTRODUCTION

Sizing is everything when it comes to photography on the web. You want the photos to look vibrant and crisp so you think they need to be big. But wait, if they’re too big, they can actually cause loading problems. What’s a Betty (or Billy) to do?

We’ve created this handy little guide to help you crop, size, and save your photo files so they’ll look they’re best on your website or social media.

 

EDITING PHOTOS

Photoshop:

What you should know:  Photoshop can be pretty intimidating for the average blogger. The program is the tool of professionals and for good reason. There is a high learning curve and it’s way more than you need for simple cropping and sizing. If you still feel the need for the best, there is Photoshop Elements, a paired-down version of Photoshop, but still a little pricey at $80

Other Options:

What they are:  Canva, PicMonkey, and Pixlr

What you should know:  These websites offer free image editing, and they’re pretty easy to use to boot. We were able to make some basic edits with each of these websites in just a few minutes.

Better Than Stock | How to Optimize Your Images for Social Media

WEBSITES & BLOGS (*Note – we’re talking WordPress here)

Banners and Hero images:

A Hero image is a large banner image that is usually located on the main page of a website. It typically takes up the whole page, and may have text and navigation as part of it.

What you should do:  Upload a pretty large image – somewhere between 1200 to 1600 px wide (the height can vary).

Here’s why:  If you upload an image that’s only 700px wide and you want it to be full-width, WordPress will enlarge the entire image to fill the space, and you’ll get something like this – a pixelated image. Not very appetizing, is it?

BLOG POSTS

What you should do:  Keep the photo medium sized so it looks good, but also loads quickly. For this you’ll want to be around 800 px wide (again, height can vary).

Here’s why:  If you upload a 1500px-wide photo to your media library, you’ll need to use the WordPress media editor to “shrink” the size of the photo. This actually diminishes the quality of the photo and could cause your page to load more slowly.

 

SOCIAL MEDIA

What you should do: Do a quick online search for the most recent photo specs. We’ll give em to you here, but as we know sites change their requirements all the time.

Here’s Why:  Social media sites like Twitter, Facebook, Instagram, Google+, etc give specific image requirements for a reason! They’ve figured out how to make sure the photos look the very best they can. If you’re NOT uploading images specifically cropped to meet their requirements, your photos may look stretched or pixelated.

Facebook:

cover photo: 851 x 315
profile photo: 180 x 180
app image: 11 x 74
timeline size: 1200 x 627 (FB will automatically resize, so start out with the highest size, whenever you can)

Twitter:

header image: 1500 x 500
profile photo: 400 x 400
twitpic: 1024 x 512 (perfect for promotions)

Instagram:

profile photo: 110 x 110

maximum resolution for Instagram photos are: 2048 x 2048
*note – apparently, there is a difference in resolution/quality between taking a photo from within the Instagram app vs. importing an image in from your camera’s library.

 

THE DIFFERENCE BETWEEN JPG & PNG

The main difference between JPG and PNG files is file size. For example, when saving a 500 x 250 px photo, the JPG will be a file size of 93KB, while the PNG file size is 266KB. The reason for this is that JPG files are more compressed, which loses some of the image quality. Of course, there is always a compromise – quality vs. load-time.

If you size your photos to fit the dimensions they’ll be displayed at before uploading them to your WordPress media library, you should be fine either way. We did a test and found that a JPG file and a PNG file, saved at the same size showed no real noticeable difference.

One word of caution, if you’re going to have an image-heavy post, you’re going to want to have smaller (JPG) images so that your page loads quickly. Nothing worse than sitting there for two whole minutes while photos load.

 

RETINA DISPLAYS

We’ve spent a good amount of time researching this so we can give you the best advice possible. We won’t go into all the science here. There are plenty of other websites that have much more in-depth information.

What you should know:  Retina, or high-resolution, screens display images at 2 times the size as a non-retina device. Basically this means that a “normal” photo that is 200 x 400 pixels will be “stretched” to fit a 400 x 800 display on a retina screen. And this means it’ll look blurry and pixelated. Think of a 2″ piece of silly-putty pressed to a newspaper, then stretched to fit a 4″ space.

What you should do:  Ah, this is where things get a little tricky. The simplest thing to do is to just double all your photo sizes so they show up looking amazing on retina screens. The downside (and you knew there’d be one, right) is that a non-retina device user is loading an image that is unnecessarily large.

Another option is to create and save two of every file – one “normal” photo, and one “retina” photo – and then install a plugin to your WordPress site to recognize the device the photo is being viewed on. There are a few more options out there, but we think these are the two most realistic.

It comes down to how many photos you use, how much traffic your site gets, and how much time you have.

 

LE RECAP

  • Use easy editing websites to crop photos to the exact dimensions you want them displayed.
  • Use larger photo sizes where they count like hero and banner photos.
  • Use higher quality images when possible, but know that you’re adding loading time.