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.

Like what you see?
Subscribe now to receive regular updates

ABOUT THE AUTHOR

Tess O'Callaghan

With experience in all of the elements required to build an outstanding website (plus organisation, creativity and great communication skills!), Tess oversees all of our web projects. Never taking her finger off the pulse, she will be your guiding star during your time working with Digital Noir.

avatar
MORE ARTICLES LIKE THIS