** page.php **
** content-page.php **

CMS Image sizes [10]

Reducing the size of images for the web Instructions


Using Photoshop (or similar photo editing software)

1
Along the navigation (in Photoshop) at the top (File | Edit | Image Layer… etc)
File > Open… (Locate the photograph to resize from local drive)

When your selected photograph is open,
Image > Image size

The pop up window will display the current size (width and height)
e.g. Width 4394 pixels x Height 2855 pixels – and these should be linked with a chain icon – this illustrates that it will retain the photograph’s proportion keeping its size ratio.

If it isn’t showing the measurements in pixels go to Edit > Preferences > Units & Rulers
change units for rulers to pixels and click ok.

My sample photograph is in the landscape orientation so the longest edge is the width.

Now reduce the width to between 1000 and 2000 pixels, where 2000 is probably the highest needed to cover for Retina screen where they use the extra pixels to add more detail, not making the images larger. (inside photographs can be opened in the lightbox mechanism but these won’t be displayed full screen anyway).

Note for Nick: The DPI (dot per inch, e.g 300 dpi) values here are for print output and have no effect on web image size. The pixel size is the size of the image on the screen, this can also be shown in ruler measurements as well (cm, mm) but is easier to work with as pixels.

The height will automatically adjust to keep the proportion.

2
Now File > Save for web & Devices (alt+shift+cntrl + s)

This pop up window can show “2up” tab. This is the original and the webbed version underneath. Top right button selects either jpg (for photographs), png-8 (simple graphics) or png-24 for more complex graphics with transparency {RGB + Alpha channel).


For photos select JPG This will compressed gradients using an algorithm of comparing groups of 8 pixels (png is better for graphics with flat colours as the algorithms work differently).
Quality High 60 – 75 %
Optimized (checked)
Leave the rest and click Save

REMEMBER NOT TO OVERWRITE YOUR ORIGINAL FILE.
“Rename/save as” the new one to something like originalfilename_sm.jpg to preserve your original. Keep your original file safe as you can’t scale an image back up in size, and your modified file will also be easier to find in your file system.

Upload the new modified file to wordpress and feel happy in the knowledge that you are now optimising bandwidth use and keeping your storage to a minimum. Server disk storage will cost you money.

Done.
Fivepilchard Team fp_logo_green

Updated Jan 2017


Contact us for more information