Image Preparation
Last updated: 1/4/2019Table of contents
1. Preparing imagery
Did you know that nearly 50% of web users expect a page to load in 2 seconds or less and that 79% of users who have trouble with performance won't return to a site?
The speed of a website depends on a multitude of factors, one of the most important being the size of the assets that must be loaded. The most significant assets on arup.com are images.
This guide will provide you with instructions and advice on how to prepare imagery for use online.
2. Tools
To prepare imagery for use on arup.com you need access to a suitable piece of image editing software. This guide assumes that you have access to Photoshop. If you don't then you should request this software from your manager.
3. Image quality
When adding images to a page on arup.com you need to consider three vital issues.
- The physical size of your image (i.e. its size in pixels wide and high)
- The file size of your image
- The visual quality of your image
Each of these considerations are interlinked and you need to think about all three when preparing an image. The examples below provide examples of how these factors can affect your images.
4. Image size
The size of your image depends on where you're adding it. To aid you, image dimensions for each module are provided as part of the guidance for each module / page.
For your reference, images generally stick to a rule of a 16:9 ratio. This should mean that if you resize one dimension (for example the width), the height should always maintain a 16:9 ratio.
Resizing an image
This guide uses the example of preparing an image for adding as a Project's main or banner image. This image should be resized to 2000px wide by 1125px high.
To resize an image in Photoshop, follow the steps below.
- Open your image in Photoshop
- Check the size of your image - click 'Image' in the main navigation, and then select 'Image size' from the drop-down menu
Check your image proportions
When resizing your image, you need to be careful to maintain your image proprtions. When you resize the width, want the height to resize by a corresponding amount (or vice versa). This ensures that the image retains the correct shape.
You can ensure that Photoshop will only resize in this way by ensuring that the 'constrain image ratio' option is checked.
In the Image Size window (above) make sure that the small 'chain' icon is selected and highlighted as in the screenshot below.
Resize the image
The first thing to consider is whether to resize by width or by height. At this stage you need to focus on ensuring that EITHER the width or the height is correct - and that the dimension you haven't edited, is either equal, or greater than, your desired amount.
- If you have a landscape image (wider than it is height), its best to resize the height.
- If you have portrait image (taller than it is wide), it will be best to resize the width
In this example, the image is a landscape image. Therefore, the first dimension to resize will be the height. The screenshot below shows what happens when the height of this image is switched to 1125px.
Images that don't have two correct dimensions after your first resize
When you resize your image's width or height, it's unlikely that both dimensions will automatically align to what you want.
For example - imagine you have an image of dimensions 2800px wide by 1688px high. Changing the height of this image to 1125px would result in its width becoming 1866px wide. This is not good as now your image is not wide enough.
To fix this, you should cancel your image resize. If you've already resized the image click 'ctrl +alt + z' on your keyboard to undo any changes you've made.
Resize your image again, but this time, resize the width instead. If you change the width of this image to 2000px wide, the height will become 1206px high. It's too high, but this can be fixed with 'cropping' - detailed below.
WARNING - if when you resize the width of your image, and the height is reduced to LESS than your desired dimensions, you need to rethink your approach. You should ensure that the dimension you haven't manually altered is always either equal to, or greater than, the target height (or width - depending on which value you've altered).
5. Image cropping
At this point, you should have an image that has at least one dimension correctly resized (either the height or the width. In the example below, the image's width has been set to 2000px, but its height of 1206px is too great. This will be corrected by cropping the image.
To get the exact dimensions, the image should be cropped. Cropping removes excess pixels from the edges of your image. You can choose how this is done to preserve the look of your image for example, remove the excess from the side(s) or the top / bottom etc.
To crop your image:
- Select the 'Crop tool' from the left-and tools menu
- You'll notice that a border is added to your image, along with elements you can select (see screenshot below - each element is highlighted by a red arrow)
- Select how you want to crop the image by clicking on one of the 'selectors' you see. It is best to use the options in the centre of the side you're cropping from.
- In this example, we wish to remove 81px from the image's height (1206px - 1125px = 81px). This could be removed from the top or bottom. Choosing how to crop depends on the individual image. Here, the pixels are being removed from the bottom.
- If you're happy with your changes, hit the 'enter' key on your keyboard and the image will be cropped. If you're not happy, keep playing until you are.
Undoing a crop
If you crop the image and decide you're not happy with it, you can revert the image back by hitting 'ctrl + alt + z' on your keyboard at the same time. Every time you hit these keys, the image will revert back to the previous change you made.
For example, if you resized your image, and then cropped it, if you hit 'ctrl + alt + z' twice, it would revert the image back to its original size (i.e. before you resized it).
Pixel perfect crops
You may notice that sometimes when you're cropping the image, you cannot get the exact number of pixels you're looking for. For example, you want to ensure the height is 1125px. Every time you crop the height back, it goes to 1126px or 1123px but you just cannot get to 1125px.
There are two ways around this:
- Sometimes magnifying your image will resolve the image. You can increase the size of your image view by clicking 'Ctrl + +' on your keyboard. To reduce the size, click 'Ctrl + -'
- You can use the 'canvas size' tool to get the exact result you're looking for. To do this follow the instructions below.
To use the 'canvas size' tool:
- Click 'Image' from them main menu and choose 'Canvas' from the drop-down menu.
- The resulting window will show you the exact size of your entire image. You can tweak the width or height by entering the values you want. By default, this will remove pixels in equal amounts from both edges of your image.
- For example, if you had a height of 1206px and entered a new height of 1125px, and clicked 'ok' it would remove 40px from the top of your image and 41px from the bottom.
- You should only use this tool for removing small amounts of pixels as its harder to control than the crop tool.
6. Saving images for use online
Saving images for use online is important. This gives you the opportunity to make major reductions to the size of the file you're going to upload to the website. The smaller the file size, the faster the page will load.
The instructions below are based on Photoshop CC 2015. Generic instructions for older versions are also detailed
Once you're happy your image is ready to save:
- Click the 'File' option in the main menu
- From the dropdown, choose 'Export' - this will open a secondary menu - once this appears choose 'Save for Web (legacy)'. Your screen should look something like the following screenshot
NB - if you have an older version of Photoshop, the 'Save for web' option is likely to be located directly under the 'File' menu.
If you don't have access to Photoshop, there are alternatives available, and online options for saving files for web. You can find some of these below:
https://imageoptim.com/versions.html
- The first thing to do is ensure that you're going to save your image as a jpeg file. These are the best file types for use online - offering good quality with lower file sizes. In the screenshot below, the file type is highlighted. If you need to change it, click the option and select '.jpeg' from the dropdown:
- In the above example, the image was already a jpeg file. If yours is a png or gif, you'll need to manually select jpeg from the list. You can find details below of when to use different file types online.
- At the top left of this window, you'll see four tabs 'Original', 'Optimized', '2-up' and '4-up'. The screenshot above is showing the '4-up' selection. Click 'Optimized' (highlighted in red below) The window will then look similar to the below:
- Here you can see what your image will look like if it was saved immediately, and you can see the size of the file that will be generated (highlighted in blue above). At this point the file size would be 140.7k
- To change the file size further, you need to manually alter the image's 'quality'. In the top righthand corner of the above screenshot (highlighted in black) is an option for altering the quality.
Click this so that a selector appears below it. You can then slide this left (to reduce quality) or right (to increase quality). As you do so, you'll notice that size of the file begins to change. You'll also notice that the quality of your image might degrade if you go too far. In the below example, the quality has been reduced to zero.
- To be sure you're happy with the image's quality, you can move around it by clicking your mouse on the image and then dragging it around. Look at different areas of your image and check whether you can see any pixilation or imperfections on your image. If you can, increase the quality slightly and check again.
- If you're happy with your image, click the 'Save' button
- When saving your file, you should remember:
- Add the dimensions of your image into the file name for example 2000x1125
- Be descriptive with your file name - for example sydneyoperahouseatnight2000x1125
- Try and avoid leaving spaces in your file name - whilst Photoshop should automatically replace spaces, any spaces that do occur will likely prevent the file working correctly in Sitecore
When to use different file types
Virtually all of your images for use online should be saved as jpeg files. However, there will be circumstances when you need to use others:
- Your image contains transparency - if you have a complex image that has a transparent background then you may need to save this as a PNG file. Jpegs do NOT maintain transparency - it will automatically replace transparency with a white background
- Animated gifs - to maintain any animation in an image file, the image must be saved as a Gif file
If you're not sure, contact steve.burleigh@arup.com or emma.kennedy@arup.com for advice and support.
FAQ
- What is the ideal image size?
- When is an image too big?
- I resize my image, to the correct width, but the height is reduced to below what I want. How can I change this?
- I resize my image, to the correct height, but the width is reduced to below what I want. How can I change this?
- The dimensions of my image are smaller than what I require. Can I make an image bigger?
- I've cropped my image, but I've removed an important part of the image. What should I do?
- I've saved my image and uploaded it to the website. The quality of the image isn't good. What can I do?
- I've saved my image and uploaded it to the website, but it isn't showing at all. Why is this?
1. What is an ideal image size?
A. There is no single ideal size. Image sizes depend on a number of factors, including the quality of the original photograph and the complexity and detail of its content. A simple diagram will be much smaller in size than a complex photo of a cityscape. Sometimes you'll be able to reduce the size to less than 100kb, other times you'll struggle to get it below 4 - 500kb without seeing a loss in quality. The most important thing is to try and reduce the size.
2. When is an image too big?
A. If you save an image and notice that the file size is more than around 700 - 800kb then your image is too large and you should try to reduce it via the method described above. It's highly unlikely that you should ever need to have a file this large.
3. I resize my image, to the correct width, but the height is reduced to below what I want. How can I change this?
A. If the above scenario happens, the first thing to try is to resize your height instead. If this means that your width is too great, you can crop the image's width down to the desired size.
4. I resize my image, to the correct height, but the width is reduced to below what I want. How can I change this?
A. In this scenario, you should try resizing the width instead, and then cropping the height as appropriate.
5. The dimensions of my image are smaller than what I require. Can I make an image bigger?
A. Technically yes. But you should only ever do this if the size increase is tiny. For example, if you had an image of 2000px wide by 1105px high, it would be acceptable to increase the height of your image to 1125 and then crop of the extra width created.
But you must be aware that increasing the size of an image will affect its quality. It is impossible to make a small image into a big image without reducing the quality of the image significantly and you should never do this. If you need to, you should instead select a different image.
6. I've cropped my image, but I've removed an important part of the image. What should I do?
A. Firstly, you can undo a crop by clicking 'Ctrl + Alt + Z' at the same time. Keep clicking these until you get the image back to where you want it. Then try cropping your image again. You can crop an image in multiple ways, either from the top or the bottom, or both. Alternatively, you can crop from the left or the right, or both - or even a combination of all these.
7. I've saved my image and uploaded it to the website. The quality of the image isn't good. What can I do?
A. Unfortunately, you'll need to save your image again via Photoshop. Try not reducing the quality as much and accepting a slightly larger file size. Don't forget you can see what the image will look like when you're saving it. Move the image around within the 'Export to web' window by clicking on it and dragging it around. Look at different parts of the image, particularly areas of high detail and areas such as sky.
8. I've saved my image and uploaded it to the website, but it isn't showing at all. Why is this?
A. If you see that your image is not showing when you preview your webpage, the most likely cause is spaces in the file name. If for example you've saved your file as 'my file name is here.jpg' it will not work. Instead, either rename your file via your PC to 'myfilenameishere.jpg' or resave the image again in photoshop without spaces in the file name. Then re-upload your image to Sitecore.