Resizing images email, web and print

Changing the Universe one pixel at a time...

Garry's Rule # 1: Never ever throw away data.
Shoot High Resolution Raw and preserve the images color space.

Garrys' Rule #2: Never ever edit or resize the original image file.

Resizing and cropping images web and print

How to preserve the the detail held in an image.

Resolution is the detail an image holds.

zoom


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)
The number of 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.

http://screenresolution.org
ppi calculator, http://dpi.lv

How to calculate Monitor or mobile device resolutions
calcMonitorrez

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

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
Epson printers print at 360 ppi, 720 ppi, and 1400 ppi, and 2800 ppi
Canon and HP Printers print at 300 ppi, 600 ppi, 1200 ppi, and 2400 ppi

Exporting (Save As...)
and/or 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!
      screenamount
      Output sharpening in the Lightroom "Export Module"

      If your editing software does not have the ability to do "Output Sharpening" you may download the free Google 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 PortrFacebook shrinkaits.

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 a "retina" or High Def screen on a webpage

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 device will download 2x as much data

Hummer-Lores <img src="../bizphotos/assets/images/rose-1x.jpg" alt="Hummer-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
Hummer-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
https://designmodo.com/responsive-retina-images/
https://www.sitepoint.com/support-retina-displays/

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.


Cropping 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.

The following Facebook Cheat sheet for Facebook image sizes


(Exporting) Sharing Collections via LRMobile –Android and iOS

You need to own a “cloud subscription” and have an Adobe Account. To set up Mobile syncing
Mac: Lightroom > Preferences and choose the “Lightroom Mobile” Tab
PCWin: Edit > Preferences and choose the “Lightroom Mobile” Tab

Click in the left column box (1) to make the collection mobile or Right click the Collection to get the contextual menu as seen below: √ Sync with Lightroom Mobile

(2) If you have 100's of collections, you can filter the collections by their name, or partial name...

If you want to share the Collection (see menu at the left) Right Click on the Collection...

Choose Make collection Public and then Copy Public Link.
This is a link for my collection of photos of my sister’s garden.
http://adobe.ly/2a4aJq3


If you choose the menu “View on Web” you;'ll log onto your Mobile Collection… You can even edit the photos “on the web”. If you are not logged in you’ll be prompted to do so…

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

Cliche cardigan american apparel PBR terry richardson ennui truffaut, high life chambray pickled twee wolf bushwick. Pour-over whatever irony pop-up, tofu quinoa blog gastropub. High life shoreditch beard artisan seitan synth. +1 tattooed occupy, echo park photo booth letterpress seitan flexitarian next level selvage put a bird on it jean shorts. Retro quinoa scenester ethnic wes anderson cosby sweater put a bird on it. Chambray farm-to-table salvia, bespoke art party mlkshk hella single-origin coffee letterpress. Mixtape odd future pour-over mumblecore, cardigan leggings wayfarers fingerstache whatever raw denim marfa.