Web Design Tips - Photos
Although we’re really proud of having one of the easiest to use Content Management Systems out there, something we find people struggle with is image sizing and optimisation.
Image Resizing
Most CMS can resize images on upload to ensure they aren’t too big, however it’s often the case that an image has specific requirements such as “must be 700px wide”. Images on the web are measured in pixels (px) so what you would do is open the image in your editor of choice. Go to Image/Resize, enter “700” in the width and ensure that you are keeping proportions (or the image will look squashed!). That’s straightforward and if you are looking for a free image editor try out the one we added into Easibuild - it's called Pixlr and it should cover 99% of anyones image editing requirements.
Image Cropping
Resizing is straightforward but sometimes an image has very specific requirements (700px wide by 300px high). Most images you have are probably 4:3 format so a 700px wide image would be 525px high. What a lot of people will do is try changing the image size, untick “keep proportions” and squeeze the image into the dimensions.
What you should do is pick "Image/Crop Image" in your editor. This should give you options to add in a width and height as well as where to crop from (top, middle, bottom etc). Unfortunately this is something that can’t be easily automated so requires you to make a few creative decisions (like not cutting a head off!).
What you should do is pick "Image/Crop Image" in your editor. This should give you options to add in a width and height as well as where to crop from (top, middle, bottom etc). Unfortunately this is something that can’t be easily automated so requires you to make a few creative decisions (like not cutting a head off!).
Image Optimisation
We mentioned before the value in optimising your site and the one area where this is really important is images. If you’ve sized and cropped your image properly then you are already halfway there. It’s hard to beat Photoshop when it comes to compressing an image but if you don’t have it I’d recommend using an online service such as jpegmini which allows you to upload the image and download a compressed version. You can then use that compressed version on your site.
File Format
When it comes to file formats the best one for photos is jpg. Only use gif or png if your image has lots of flat colour. Otherwise the file size will be huge compared to a jpg.
Colour Mode
The final issue is Colour Mode. in print we use 4 inks - CMYK - Cyan, Magenta, Yellow and Key (Black). However, on the web only three colours are used RGB - Red, Green and Blue. A jpg that was uploaded in CMYK mode will probably not work on most browsers. Always ensure you use RGB!
The final issue is Colour Mode. in print we use 4 inks - CMYK - Cyan, Magenta, Yellow and Key (Black). However, on the web only three colours are used RGB - Red, Green and Blue. A jpg that was uploaded in CMYK mode will probably not work on most browsers. Always ensure you use RGB!