Image Prep

Your website resizes images on-the-fly, so they will fit any size screen, which is super exciting, but means you must take a few special steps to prepare the images you upload.

• Upload a large image (don't worry we make smaller versions for mobile devices and ipads): Your ideal image size is 1860 x 1140 pixels for a horizontal (930 x 1140 for a vertical). No need to crop your image, just make one of those dimensions the longest edge (i.e. 1860 x 1072 or 1700 x 1140).
  
  
• Name your images properly: Avoid using anything but letters, numbers, underscores and dashes (and only one period before the file format(example: .jpg) when naming your images. Each image must have a unique name.

FOR PHOTOSHOP USERS
(Lightroom guide can be found here)

1.) Start by opening the original high-res image file on your computer, in PhotoShop
2.) Select Image>Image Size and change the ppi to 72

3.) Now go to File>Automate>Fit Image set the constraints to: 1860 x 1140


NOTE: For the 4k and 5k screens people are using now you might consider using 2500 x 1700

(Make sure the checkbox is checked for the Don't Enlarge setting)

4.) Now to save the file for your PhotoFolio website:
(PhotoShop 2014 users) Select File>Save for web 
(Photoshop CC users) Select File>Export>Save for Web (Legacy)

5.) In the Save for Web screen, make sure the preset is set to .JPG and select the 2-Up view from the tab-view in the top left corner, to see the Original image in the left-hand pane and the Export image on the right-hand pane (with Output File Size preview below the Export image).

6.) Make sure the checkbox is checked for both Optimized and Convert to sRGB
7.) For the Quality setting in top right, set the Quality slider to a value between 60 and 80

Note: You want the image file sizes saved in the 550kb - 875kb range (the less colors the easier it will be to get the file size lower), so use a lower Quality setting to achieve the smaller file size. 

For Example (click to enlarge):


8.) Now select the Save... button, to save your web-image and change the filename – like adding "_web" to the end of the filename – before you close the image. That way you DO NOT replace the original file with your save for web changes.

Note: If you want to batch save multiple images for web at once, simply record the steps above as an Action that you can run for multiple images in selected folder of images on your computer. If you've never batch processed images or recorded actions in PhotoShop, you can find plenty of video tutorials by running a Google Search or YouTube using: "how to record actions in PhotoShop".

FOR LIGHTROOM USERS

We have a special tutorial on how to Batch Resize Images in Lightroom published for you. Check it out!