Resizing a Photo for Websites and Social Media

What is the best Resolution to use for my YouTube Channel Art? What is Image Resolution? Let's break it down. When creating a website, customizing your social media pages, or posting to your Blog and even updating your feed on Twitter and Instagram, it’s important to understand what your pictures will look like on all the various devices that view your page and photo. When you set a custom image on the top of your YouTube page, you must size the image beforehand to avoid losing the important parts of the picture when it finally lands on your page. The Resolution of an image are the dimensions of that image, defined in Pixels.

When you post an image on Instagram or Facebook, its important to know which parts of the image will be seen on your homepage or someone else’s news feed. Have you ever noticed someone’s post looks like a picture of an elbow until you click on it, to reveal a beautiful wedding memory? They didn’t take in to account how that picture will ultimately be posted to the web.

Let’s jump right in. When you’re designing a website, the photos you use are hugely important tools for telling your stories as well as capturing your audience’s attention without being too annoying. One of the biggest hurdles of designing a site today is optimizing it for viewing on Desktops, Tablets, and Smartphones alike.

Elbow_Facebook

The internet looks different on all three categories of devices and if you don’t keep that in mind while designing your website and social media pages, you will fall into a trap of thinking your site looks great but most of your audience uses a different device, so they think it looks like crap. The best way to avoid this problem is to know and understand PIXELS.

Pixels are all the little squares that make up a digital picture as well as those same little squares used to display that picture on your computer monitor, television, tablet, or smartphone. When you zoom very close in on an image, you start to see it’s made of tiny solid colored squares; those are Pixels. When an image is zoomed in far enough to see those squares, we call that Pixelation. Digital cameras with higher MP (Megapixels) make their images out of more and smaller pixels, so you can zoom in more on the image before it becomes “pixelated”. Image Dimensions are sized by Pixels and that usually looks like this – “1920x1080” or “2560x1440”. The first set is the pixel size of a 1080p video or photo (HD), the second set is the recommended YouTube Channel Art size. The first number of the sequence “1920x1080” is stating that the image is 1920 pixel WIDE, while the second part is telling you that it’s 1080 pixels TALL.

Computer_Displays

Your television and Computer Monitors are usually in a “Landscape” Orientation (Wide), but most users use their smartphones and tablets in the “Portrait” Orientation (Tall). It’s important to take this into account when designing the different images on your Websites and Social Pages but also useful to keep in mind when posting your pics on social media to avoid being All Elbows.

When you design a Header Image for your website, you’ll need to experiment with the size that best fits your layout. If your header images take up the entire width of your webpage, as YouTube channel art does, you’ll want to use a very Wide and likely Short image. If you want to ensure your header image is never pixelated, I would suggest keeping the first half of those images’ Pixel Size between 3840 and 4096. That would look something like 3840x2160 or 4096x2160. Those are UHD and 4K resolutions, respectively. If I view your website on my monitor, and your header image is less than 4096 pixels WIDE, it will be pixelated. If you have a menu on the side of your website, as this one does, then you don’t have to go so big. The header image of this website on the Home Page is tall, but on this page for a Blog Post, it is short. It’s important to make sure you know and plan out how that image will be cropped for each page of your website as well as on your social media pages.

Most website design programs online that come with sites from Wix.com, GoDaddy.com, 1and1.com among others, all have Optimization for Mobile Versions of your website. Genius as that might sound, these features often Wreck your website specifically because you don’t provide the program various versions of your images to use in the Desktop or Mobile versions of your website. Computers have gotten really smart these days, but we must remember they’re still comparatively stupid and we constantly need to hand feed them most of the way. It’s the process of applying the information you give a computer where they really start to shine. You tell it, “Use this image for Desktop and this one for Mobile” and it’s smart enough to make the replacement on the fly for each use, without you having to make two versions yourself.

A computer is not however, smart enough to recognize the difference between smiling newlyweds and their Aunt Phillis’ elbow in the background. It can’t make the decision of where to crop because it doesn’t know what smiling newlyweds are or what an elbow is. The bottom line is, even if you use the mobile optimization features of your website design program, go through your images on your site, edit the options, and provide the program with the necessary information it needs to resize your photos on the fly or provide it with alternatives to use in the cases of Desktop view or Mobile view.

There’s a program I often turn to for most all my image manipulation needs. That program is called GIMP. Excuse the name, it stands for GNU Image Manipulation Program. This software makes it easy to size up a photo for all aspects of the internet as well as making sure you have the right dimensions for your headshot and a whole lot more I’ll get into in another post. Gimp is a free download. Let’s walk through a couple steps of Resizing a Photograph for YouTube’s Channel Art, which suggests an image size of 2560x1440 Pixels.

First you open the photograph in Gimp. Then find your way to the menus at the top and hover over “Image”. A dropdown menu will appear. Navigate to “SCALE IMAGE”. This step will keep you working with the original image but only shaving off a little bit to fit in your parameters. If you change the canvas size first, you’ll crop quite a bit out. Start with “Scale Image”.

Resize_In_Gimp_1

Before changing the dimensions, check to make sure the icon next to the dimensions shows a solid chain link. That Icon means, whatever changes you make to one dimension (Height or Width), will automatically change the other dimension to keep it properly proportioned. If you click that icon and it shows a broken chain link, you will now change the dimensions independently of one another. For our purposes here, we want the image to retain its original proportions, so we’ll leave the chain link solid. Our priority is the Width, so we’ll change that to 2560 and let the Height change itself. In this case, it automatically changed the height to 1709. Apply this change by clicking "Scale".

Resize_In_Gimp_Scale

Next, we’ll navigate back to the menus at the top and hover over “Image” again. A dropdown menu will appear and you’ll want to click on “CANVAS SIZE”. Changing the Canvas size alters the area of the image that you will see. It will Crop and image to specific dimensions exactly, instead of trying to use your curser to square up the size you’re looking for.

Resize_In_Gimp_2

Here we will want to check the chain link again, but this time we want to click it to show a Broken chain link. We’re going to be Cropping the dimensions of the image to our exact specifications here, so we won’t have to worry about it squishing like the Resizing feature. We’ve already dictated the Width of our image in the previous step when we resized it, so now we just need to edit the Height. Change the Height to 1440 (again, this is an example for YouTube Channel Art). Before applying this change, look at the little preview box below your dimensions. You should be able to make out lines on the top and bottom of the image which give you an indication of what is about to be cut out. You can grab the image and move it around that box to make the next step even easier.

Resize_In_Gimp_Canvas

Now that you have resized and cropped your image by reducing your canvas size, you still can fine tune which areas of the image that were cropped by clicking and dragging the image around to better fit your subject within the newly confined canvas space.

Once you are happy with your image, return to the menu bar at the top and this time, hover over “File”. A drop-down menu will appear, navigate down to “EXPORT AS” and click that. When the window opens to save the file, give it a name, double check that you’re saving it as the requested or preferred file type and click Export. Before it’s done, another window should pop up. It asks you what Quality you wish to save this image in. Unless you’re using it as reference in a long process of drafts, you’ll want to save it as 100% quality.

Resize_In_Gimp_Export

You now have a resized photograph. Sorry Aunt Phillis, your elbow isn’t bad, it’s just not those two cuties in the middle. I hope you all got some useful information here. If you think there’s a better way to resize photos, have suggestions for other programs, or want to dive into other stuff GIMP can do, leave a comment below and join the conversation.

Leave a Reply

Your email address will not be published. Required fields are marked *