Photo sizes always need to be exact.
* Bot Garden – see photo sizes in special folder on left nav
For best results the photo sizes always need to be exact – every time. Not sure how much it happens on this site but there are times when multi megabit photos are uploaded when a cropped and optimized image should have been uploaded. There are things in place to help assure that these large photos aren’t being served to users, especially on mobile, but it’s always best to do a crop and optimize routine for every photo.
The photos sizes are twice as large as they appear on screen so that retina and high DPI devices get the “2x” pixels they need for the sharpest display results.
Sizes in pixels
-
- Home page banner: 3840w x 1200h
- Secondary page banner – Outreach size: 3840w x 900h
- Secondary page banner – Service-Learning size: 3840w x 1400h
- News or Photo Story Featured image: 1440w x 960h
- News or Photo Story on page image: 1440w x 960h (or as tall as necessary)
- Team member: 320w x 460h
Outreach magazine cover: 793w x 1100h
How to Manage Images in Photoshop
Use a single Photoshop .psd file for each type of image on the website. For instance the secondary banner images would be a single file such as secondaryBanner.psd which would be the master psd for that image size or type. All new images for export to the website would be pasted into this master file as a new layer. This allows you to keep a history of images used as the specific type as well as ensuring that the output is always sized and cropped correctly.
The goal for image sizing is to output an image that is suitable for quality at the lowest “weight” possible in KB or MB. This will ensure mobile devices and people on slower internet connections have a fast loading website.
Step 1. Open *image*.psd. Note that the screenshot below shows that it’s open at 16.7% of its original size, and that there’s plenty of extra area around the image within the window the file is open on. That extra space will give you room to resize the large image pasted in step 2.
Step 2. Copy the source file for placement on a new layer. Paste into the master .psd. Choose CMD-T (mac) or CNTR-T (win) to get the Transform tool. You’ll see 8 white squares on the image border that allwo you to click and drag the photo to size. Grab a corner and size down. The aspect ratio will stay the same. For a quicker downsizing you can hold the Option/Alt key right after you grab the corner. This helps on layers/images that are much larger than the target size.
Once the photo fits within the area click Enter or simply move to the next task within Photoshop and the transform will hold. Use the Move Tool to move the image around on the layer if necessary so that it will have the crop you want (see second image below). Also note ont eh second image that the “Info” panel is open. This is handy for seeing the size WxH of pasted images when they’re selected. You can turn that panel on under Window in the Photoshop app.
Step 3: Export the image for Web. I use the Save for Web Legacy export but the key is to set the photo to JPEG at around a 60 Quality setting (adjust if necesssary). Note that the example shown below is 3840 x 1200 which is a large banner. The file size is 906k. If this file had more complexity it might break the 1 mega-bit barrier, but typically no image should ever be over 1MB, and most smaller ones should be 50kb – 200kb. The second photo below shows a blog featured image that’s actually reasonably large and it “weighs” 188kb.
Banner Photo
Blog Photo
Notes:
Almost always upload a photo as a jpeg and not a .png. Use .png for graphics or items with a transparent background, such as logo’s or page graphics. See the difference in file size for a banner image saved as a jpg vs png.
