loading...

How to edit an image on your WordPress website (video)

avatar

BY Tess O'Callaghan

{Project Manager, Designer, Developer}

27 October 2017

Reading Time: 1 minute

For the tutorial, we have used GIMP, which is a free software option, however, the methods also apply to Photoshop and similar programs.

Sizing

(set images at 72 ppi and <100kb file size where possible)

*If you are replacing an existing image, check it’s size first and upload an image at exactly that size to keep the layout consistent

*Use tinypng.com to optimise all images before uploading unless you can get the file size down in your image editing program.

 

General Guide

Full-screen width page layout (website goes right to the edges of the screen)

Full width image: 2560px wide

Half page image: 1280px wide

Small Image: approx. 600px wide

 

Contained page layout (website has space on each side)

Full width image: 1170px wide

Half page image: 585px wide

Small Image: approx. 300px wide

 

Replacing an image on your website

  1. Log in to your website backend
  2. Go to the page that holds the image
  3. Check the current size
  4. Open GIMP/Photoshop
    1. Download current image and place new one on top (good for matching positioning)
    2. Create a new doc with correct dimensions
  5. Colour adjustments if needed
    1. Desaturate
    2. Adjust contrast
  6. Export (PNG if transparent background, JPEG if no transparency. When in doubt, match original file)
    1. Play with settings to get the photo looking as sharp as possible while still 100kb or less

If you have trouble getting the photo below 100kb, load it to tinypng.com and it may compress it enough for you.

ABOUT THE AUTHOR

Tess O'Callaghan

Tess is passionate about creating a unique, straightforward user experience tailored to each business and subject matter. Add to that a very organised and thoughtful approach to projects, plus great communication skills, and you’ve got a brilliant project manager for all of our web projects.

avatar
MORE ARTICLES LIKE THIS