Did you ever post an image on your blog or on social media and realized it wasn’t displayed correctly or the resolution was bad. I think this happens to everyone. The problem is, you need different sizes for all the places you want to post your image be it online or in print. So, what to do? You have to resize your images in Photoshop and I will show you how this works.
+ At the end of this post, you can get my super awesome cheat sheet for social media image sizes.
When we are talking about the size of an image, we are talking about its dimensions (meaning the height and width) usually measured in pixels for web purposes or in inch/cm for print. If you want to post your image online or you decide to get it printed, your image must fulfill certain requirements. It is important to know the right size, resolution, and file format you will need.
For print: You should ask your print service about the file format requirements and the size, this will be dependent on what exactly you are going to print (printing method, material…). A good tip is, to always have a resolution of 250 dpi in your end output format, 300 would be perfect, but speaking out of my own experience, I can tell you, a lot will even work with 150 dpi. This means if you sized your image 1:1 in Photoshop the minimum resolution should be 250 dpi to make sure your print will look good.
For your blog: It is important to know the size of your post area. Mine is 600px, so if I want to display an image over the full widths, I will stick to this size. If I want to center it or I want the text to flow around I adjust the size accordingly.
For social media: That’s a completely different game. Twitter, Facebook, Instagram, they all have different specifications for their image sizes. A cheat sheet is really handy here because you can’t remember them all.
Let’s get to the actual resizing part now. It’s time to bring your images in for a nice fresh cut and restyling.
Tip: Before you start editing a file you should always make a copy. Important! Images for print should be saved in CMYK mode, for the web you should use the RGB mode.
Open your image in Photoshop. If your file consists just of the image you have to unlock the background layer before you can start anything. Select your image layer and go to ”Image” and select ”Image size” and you will see this:
At the top, you can see the actual file size in KB or MB. While a large size means a high resolution, it also means long loading time and big storage space. For the web, you don’t really need a very high resolution. What you should look for are the dimensions. Here you find the heights and widths of your image and here is where you need to adjust your image depending on where you want to share it on social media.
You can also change the measurements in centimeters or inches but be aware your pixel dimension will change as well because they are related. As long as you leave the constrain aspect ratio checked (little link element between height and width) heights and widths of your image will change proportionately.
Tip: never uncheck this as it will either stretch or squeeze your image with a rather weird result you should avoid.
However, sometimes the proportions of your image won’t fit the requirements and you have to crop your image to the right size. In order to do this, select your crop tool. In the menu area, you will find the fields to fill in the size you need beforehand. Now as you click and drag your cursor over the image your selection will always stay in the right proportions. Move your selection into the right place, so nothing important will be cut off and double-click to verify.
For print: you can never go wrong with a pdf-file. It seems to be a standard nowadays because everybody can work with these files and you have a lot of options here for your file (e.g. file size, integrated fonts, security).
For the web: loading time is important, so you have to save a small size file. Just to mention it; for animated elements you should pick a gif-file. For me most important is png vs. jpg. A jpg compresses the data a lot, hence the small size, but it is perfect for photos. If you got your spot more on text, you should pick a png-file. The file size is small but the compression is lossless (is that a word?). It is also good for transparent backgrounds.
A shortcut for resizing images is to use Photoshop’s option ”save file for web”. If you go to ”export” and select ”save for web”, you can change your image dimensions, file format and other options directly in the window that opens.
Last tip for today: to make things easier you might want to consider to create templates for the image sizes you will need very often. Also, if you have a batch of images needing the same size and croppings you can create an action in Photoshop and use it to batch edit all. This way you will save a lot of time.
Do you have other resizing question, please feel free to ask in the comments? Or you have some tips I didn’t mention, let us profit from them too.