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
- Log in to your website backend
- Go to the page that holds the image
- Check the current size
- Open GIMP/Photoshop
- Download current image and place new one on top (good for matching positioning)
- Create a new doc with correct dimensions
- Colour adjustments if needed
- Desaturate
- Adjust contrast
- Export (PNG if transparent background, JPEG if no transparency. When in doubt, match original file)
- 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.
