Resizing images for web and print

Changing the Universe one pixel at a time...


Resolution is the detail an image holds and determines the size of a print or a screen display

Image Resolution

The number of distinct pixels in the width and the number of distinct pixels in the height, usually expressed as W x H = the total number of pixels. The unit is Pixels, Usually Mega-Pixels

Pixels Per Inch (PPI)

Pixels displayed or printed per inch. Unit is Pixels Per Inch (PPI)

Monitor/Device Display Resolution

Display resolution will tell you how to optimally resize images for display on your tablet or phone.

Go to one of these websites to DIRECTLY see your monitor or devices Resolution.

How to calculate Monitor or mobile device resolutions


Some Mobile Screen Sizes, PPI and Aspect Ratios
Device Screen size (Resolution) PPI Aspect Ratio
Apple’s new iPad 9.7 inches Retina 2048 x 1536 264 4:3
Apple iPad / iPad 2 9.7 inches Not Retina 1024 x 768 132 4:3
Apple iPhone 7 1920 x 1080 401 16:9
Samsung Galaxy Note 10.1 10.1 inches. 2560 x 1600 149 16:10
Samsung Galaxy S7. 2560 x 1440 577 16:9
A complete Wikipedia list of high-definition devices display resolution link

Print Dimensions: Determining the size of a print in inches

Dividing the number of pixels in the width and height by the number of pixels per inch you want to print (PPI) gives you the dimension or size of the image that can be printed.

W x H (Pixels)
Pixels (Per Inch) = Width and Height in inches (Pixels cancel)

Optimized Printer resolution for best prints

Setting up the correct PPI for a printer "Uprez" in Lightroom (and Photoshop)


In the Printing Module’s Print Job Panel, uncheck Print Resolution. You should see the native ppi of the print (arrow), if you don’t you need to turn on “Dimensions”  in the Print Module.
Menu:  View > Guides > Dimensions
Keyboard shortcut
"Shift + (Command Mac - Control PC) + U"

This what you need to enter in the “Print Resolution Box”

  • If Image ppi is less than 360 up-sample Epson to 360 ppi
  • If Image ppi is less than 300 upsample Canon to 300 ppi
  • If image ppi is less than 720 but bigger than 360 upsample Epson to 720 ppi
  • If image ppi is less than 600 but bigger than 300 upsample Canon to 600 ppi

Check the Print Resolution box to let Lightroom “UpRez” the photo for printing.


Note: if you don’t do this the printer will do the size matching and the result is not as good as Lightroom’s results!

Resizing Images for the screen

When you want to send or share an image, always ask:

  • How the image will be viewed
    • Screen (Email, Webpage etc,) or Print
  • How it is being sent or shared:
    • Email, hard drive/flash Drive, website (ftp, download), the cloud.
  • Ask What File Format
    • As a .jpg, .tiff, .png, .psd., raw enhanced, raw original?
      • .png supports transparency on a webpage
  • Ask what Color Space
    • ProPhoto (All raw photos use this large color space)
    • Adobe RGB (Good for editing 8 and 16 bit images in Photoshop)
    • sRGB (most Monitors and all webpages and for most printers)
  • Always ask what media.
    • Desktop & Mobile device screens or print (Matt or Glossy paper)
      • Aways Select "OutPut Sharpening" choose Media Type and an Amount!
      Output sharpening in the Lightroom "Export Module"

      If your editing software does not have the ability to do "Output Sharpening" you may download the CURRENTLY free DXO NIK Sharpening Pro 3

Downsizing images for a full screen slideshow on mobile displays and desktop screens

When you want to display a landscape or a portrait full screen on a your mobile device you need to look up the screen resolution and when you scale the image do the following

Scale the image to the resolution of the device, but if the aspect ratio of the image is different from the aspect ratio of the device the resultant image will be cropped.

To avoid the crop problem do this...
If most of the images are in "Landscape Mode"

  • Landscapes: Resize the image to "fit" the Long Edge

If you have a mix of Landscape Mode and Portrait Mode images you'll have to turn the device 90 degrees to fill the full screen for Portraits.

If most of the images are in "Portrait Mode"

  • Portraits: Resize the image to "fit" the SHORT Edge

If you have a mix of Portrait Mode and Landscape Mode images you'll have to turn the device 90 degrees to fill the full screen for Landscapes.

Downsizing Images for the web

In order to get the best result on a normal or high def screen, the easiest solution is to create your web images 2x bigger than the display dimensions.

Pro - you only need to make 1 resized image
Con - The users computer/device will download twice as much data

winterrose-Lores <img src="../bizphotos/assets/images/rose-1x.jpg" alt="winterrose-Lores" width="300" height="300" style="float:left; border:1px black solid; margin:6px ;">

On a retina display this image will look a bit "fuzzy"

300 x 300 Pixel image displayed in a 300 x 300 pixel space

Winter rose -2x <img src="assets/images/rose-2x.jpg" alt="Hummer-2x" width="300" height="300" style="float:left; border:1px black solid; margin: 6px;">

On a retina display the image will look sharper and display more detail

600 x 600 Pixel image displayed in a 300 x 300 pixel space

For other solutions check out

Downsizing Images for Facebook

facebook To display your images to fit the Facebook layout, the pixel size of the displayed image areas (width x height) needs to match the allotted spaces in the Facebook template. For example the Facebook "cover photo" must be 851 x 315 pixels to fit the display area. That's an aspect ratio of 2.7:1. the problem here is most digital cameras save pictures with an aspect ratio of 3:2 To display the image with more detail you can double the size of the image to 1701 pixels x 630 pixels Facebook will automatically downsize the image to fit.

Download the following Facebook Cheat sheet for Facebook image sizes

How to Squeeze an image for the Cover Page

facebook%20(2%20of%202)facebook%20(1%20of%202) Not only did the image need to be cropped, it needed to be "squeezed to fit the Facebook "window".
In Photoshop I used The Menu Item:
Edit > Content-Aware Fill
and shrank the photo to fit the Facebook aspect ratio of 2.7 to 1 for the cover photo.

Here’s some links for alternative export plugins:

other Export sharing methods

  • * The Slideshow Module

  • * The Book Module

  • * The Webpage Module

  • Prints
  • Export Via Publish