How to Optimise Images for The Web
Just how do you optimise images for the web? Well, in this guide on how to optimise images for the web, we will go through the necessities to ensure your site performs at its best for both your prospects and for the search engines.
Be it for a new website, blog post or article; selecting the right images is key. They play a massive part in offering the viewer more information about the page at a quick glance. Normally business owners think it is as simple as taking a picture and then putting it up on a website. This is not the case however as there are a variety of steps you need to consider before uploading an image.
Utilising images to give content a more visual look is key to keep your prospects interested and keep them on your site. Viewers will be able to identify what the page is about at first glance. This then makes it more likely for them to stay engaged in your website. If you hold the viewers’ attention long enough or grab their attention straight away, they will be more likely to go through the other pages of the site.
Using an image is good at grabbing a viewer’s attention, but it must be relevant to the page it is on. If you were to put an image of a red panda next to a paragraph about a plumber; where is the relevance? It doesn’t explain anything and is confusing. You do not want to be confusing your viewers (unless you’re trying to pull off some optical illusion) as they will be more likely to leave the site. Ensuring all images are relevant to the page/ article they are on ensures people keep interest and get a clear understanding of what they are reading.
Throughout this article, we will be going through all the necessary steps to optimise images so that they can be used on websites. From taking or sourcing the image to the final upload; everything will be covered.
Sourcing images is the very first step when looking at adding an image to your website. This can be through taking the images yourself, hiring a professional or sourcing them online. There are many different sources of images that are available to you.
Taking Pictures Yourself
When you take a picture using your mobile phone or personal camera, you need to make sure the settings are correct and the positioning is right. This ensures that the end photo contains everything you want and is of a high standard. Using poor quality images is one thing you must avoid. If you do not employ or know anyone that has a decent camera, you might want to consider hiring a professional photographer.
Flash, zoom, filters and much more can be applied during this if you are using a mobile phone. Filters should be left out until the editing stage which we will get to later. Utilising the other features ensures that the final photo looks its best before moving into the next stages. One issue with taking the photos yourself is that the image might be of a smaller size than what is required. This will need to be checked before moving on. You will need to decide on the width and height of the image you need. The photo you take will then need to match or exceed those specifications.
Hiring a Professional
Not everyone has an amazing camera or camera skills. Therefore, hiring a specialist might be the best choice. You will be paying for high quality images that would look great on your website. You will then be able to utilise these high-quality images for whatever you need them for. If you are getting images for your services, utilising a professional photographer will mean that they could capture your team providing those services and much more.
Using any images you find on the internet will not do. Online stock image websites offer a huge collection of high quality images that are great if you do not have any yourself. Some stock websites are free; others require a payment or subscription. Using the highest quality images is what installs assurance in the viewer’s eyes. It shows them what you are offering and that it is of high quality.
No matter where the images are being placed, be it on a page of the website or inside an article, they need to be high quality to have the greatest effect. Utilising high quality images on your site also makes the page look more interesting. Therefore, the viewer is more inclined to stay on the page for longer. This also improves the page’s quality in the eyes of search engines (in Google’s eyes the longer someone is on the page, the better).
There are different image types available that are helpful for different purposes. The main three that are used are JPEG, PNG and GIF. JPEG is a lossy compressed file format which is great for storying photographs and realistic images; PNG is a lossless compression file format which is great for line art, text-heavy images or any image that has few colours, and GIF is best used for very basic line drawings, basic text or graphics with very few colours. So, if you are looking at adding a realistic image to your site, use JPEG; the same as if you were to add a line graph to your site, use PNG. GIF is very good for small animations if a video isn’t required.
Most commonly, JPEG is used as it is one of the best formats for realistic and high quality photos. These also have a very small file size which is great for page speed. A lower file size means a much faster load time of the page the image is placed on. This is not only favoured by Google; it means that there is a less chance of the prospect leaving before the page has been loaded.
Editing Your Image
Sites nowadays have a CMS (Content Management System) that allows updates to be made to the site easily. These CMSs will allow you to add images onto the page you are working on. From here they will also allow you to re-size the image to your required height and width. This should be used as sparingly as possible.
If you were to upload an image that is 3927x2876 in height and width; it will keep this size even when added to the site. This can be seen if you were to use Inspect (on Google Chrome) when you right click on an image. If the image has a specified height and width, this means it has been resized within the editor. If you were to remove these values in the Inspect tool, the image will reveal its actual size. This obviously depends on the CMS as some systems will have programming in the background that will re-size the image for you when you add it.
Along with its size, the image will also keep its file size (e.g. KB, MB or GB). The larger the image, the larger the file size. Using too many big images can slow the website down greatly. Editing an image using a photo editing program to reduce the images size to the required height and width should be done for any image that is going to be added to your website. This ensures that your site loads quickly when it is accessed.
Editing Your Image Using Gimp
One of the programs that you can use to edit images is GIMP (GNU Image Manipulation Program). This is a free to use tool, available to download online from their website. It offers all the tools you would expect from a photo editing platform and its UI is easy to understand and use.
GIMP runs slightly different to other platforms. When the application is run, it opens three different windows. The first window is the toolbox where you can find the most important tools (with options to change how the selected tool performs). The second is the main window which contains your image that you wish to edit. This window has access to all the tools, but is rather long winded as you must go through the drop-down menus at the top to find them.
The third and final window is the layer’s window. This shows you all the current layers that have been used in the main window. You can then go through and remove, alter, rename and reorganise each layer to your preferences. As GIMP allows you to open multiple images at one time. This tool will change its view depending on what image you selected last. Be wary you don’t edit the wrong image because you hadn’t selected it first!
Cropping an Image
Depending on if you took the image yourself or if you sourced it online; you might want to crop the image to cut something off that doesn’t need to be in the image. This is where the Crop Tool comes in handy. As shown in the image below, you use this tool to select what you want to keep of the image. Once that is done, you click on any of the corner boxes (only one is showing because the mouse was highlighting it) to crop the image. This removes everything that is greyed out. The crop tool is selected using the toolbox window (third row, fourth column).
The crop tool has two uses. It allows you to remove parts of the image that you don’t want/need and this in turn reduces the images width and height. The second use is to make sure that the image is the right shape for it to be scaled. If you are sharing images on social media, they usually have recommended image sizes. Facebook prefers 1200x628pxls while Pinterest prefers 736x900pxls (width x height). So, if you have an image that is 1200x628pxls, it is perfect for Facebook, but needs to be resized for Pinterest. It is not as simple as scaling the image to the right size. If you did this, it will just squish the image and make it look unappealing. You must crop the image so that it has more height and a smaller width for you to then scale the image to the recommended dimensions.
Scaling an Image
If you have taken a picture or sourced one from an online source, you will want to consider checking its dimensions and edit the image. GIMP does this easily by showing you the current dimensions in the top bar and has a quick and easy way to change those dimensions. You do this by accessing the ‘Image’ drop down at the top of the main window and select ‘Scale Image’. You access these drop downs by right clicking on the image as well. Once you click ‘Scale Image’ you can then alter the dimensions of the image. The height and width are ‘chained’ at first which means that when one of the dimensions is altered, the other is automatically changed to make sure the image keeps its shape. You can click on this chain however to break it when enables you to edit the dimensions separately.
Exporting in JPEG or PNG
As mentioned earlier in the article, you will need to export the image into a recognisable media format. Most commonly, JEPG or PNG is used. These both have their benefits and should be used for the right images. An example would be the image at the very top of this article. We sourced, cropped, scaled and exported the image so it could be used. When you have finished editing the image, you will want to export the image so that it is usable for anything you need it for. GIMP has a save option and an export option. The save option will save the project as a GIMP file format so that you can continue editing the image at a later date. The export option is what you will need to use to convert the image into the right file type.
Once you click ‘Export As’ a file explorer window will open. You then use this to find where you would like to export the image to and select the correct file type. There are three different ways to change the file type before finally exporting the image. The first is by clicking on the plus box next to ‘Select File Type’. This brings down a drop down as shown in the image below from where you find and select the correct file format. The second method is by clicking on the drop-down menu that currently says ‘All export images’. This is the same as the first method. The last way is by manually typing the file format into the ‘Name’ field. If you were planning on exporting the image as a JPEG, you do this by typing .jpg/.jpeg/.jpe after the name.
Editing Your Image Using Adobe Photoshop
Adobe Photoshop is a very popular and most commonly used photo editing platform to date. It offers its users an easy to understand UI and is very similar to GIMP. It boasts a wide range of tools and customisation options which gives the user complete control over their edit.
Unfortunately, if you are looking for a cheap platform without a monthly subscription; Photoshop is not the tool for you. There are different plans available depending on your requirements. The cheapest plan, called Photographers, starts at £10.10 which gives you Photoshop and Lightroom. This then goes up to the Individuals plan which gives you Photoshop on its own or as part of an All Apps plan. The starting cost for this plan is £20.22. Adobe then have an educational plan called Students and teachers which includes all of Adobes Creative Cloud apps and is prices at £16.44. The final and most expensive plan is the Small and medium business plan. This gives you photoshop and simple license management for easy deployment for teams. This plan starts at £25.28.
Photoshop is a great tool and has extensive uses. However, due to the cost and subscription requirements, you must be prepared to pay for the tool to use it.
Cropping an Image
As with any image editing tool, there will be a way to crop an image. This will allow you to select which part of the image you would want to keep and what you would like to remove. Photoshop is able to work in two ways. You can have all the tools open on a single window, or you can have the tools open in a separate window; like GIMP.
Photoshop utilises the crop tool differently compared to other platforms. There are two steps involved when trying to crop an image. First you use the select tool. This allows you to select what you would like to remove from your image. You then go to Image and then Crop. This will crop out what you had previously selected. Photoshop also offers other tools that will make the cropping process much easier. The rulers which are located on the sides of the platform act as a way to mark where you want to crop. These create a blue line across the image which your select tool will then stop at. If you use these to create a box around what you want to keep; it makes it much easier to select what you want without needing to make constant adjustments.
Scaling an Image
As already mentioned previously, you will need to scale the image to your required size. This can either be smaller or bigger depending on where you need it. Photoshop enables their users to do this in different ways. You access the scaling tool via Edit > Transform and then Scale. From here you can manually drag the corners of the image to match your required size. This is freeform so you can alter the image in any way you wish. If you would want to use this method, but ensure that the image keeps its aspect ratio (so the width and height change together to keep the images form), you would want to hold shift while dragging the corners.
That is a single method of how to change the scaling of an image. The next is via the top bar which appears once you access the scale tool. This has a range of fields which you can edit. One of them is in the form of percentages. This means that you can change the size of the image by a percentage. An example of this would be if you had an image that was 2000x1000 and you wanted to half this. You would change the percentage to 50% and the image will be reduced by that much.
The last method and the method that is most common is by changing the size via pixels. This is in the top bar as well when using the scale tool. You can change the height and width by the pixel size to ensure the image matches the sizes you need.
Exporting in JPEG or PNG
Exporting in Photoshop is as easy as it is in GIMP. When you have finished editing the image, you access the export option via File. From here you have two options. Save As allows you to save the image directly to your computer without customising the quality; keeping the file size quite large (quality is maximised to 100 through this method).
The other is by using the Save for the web option. This will open a menu that you would see in most other image manipulation programs. From this menu, you can change the quality of the image and file type. Lowering the quality of the image will decrease the file size, but will make the image look more pixelated. Vies versa; if you increase the quality, the file size will increase as well. Most commonly, images are set to a 60-90 quality rating for a good quality image without a large file size.
Editing Your Image Using Canva
Canva is a free to use tool that can be accessed online. You can sign up using Facebook, Google or register for an account via an email address. Once you have done this, it brings you through the program and what it is capable of. It even starts off with a tutorial which runs through all the tools available.
Once you pass the tutorial, you have immediate access to the tool itself from where you can begin working on your designs. There is a paid version of Canva which opens up more design possibilities, but we will get to that later. This platform is easy to understand and use and doesn’t require knowledge on these kinds of platforms to be able to use it effectively. This does mean that the platform is rather basic. If you want more tools or to be able to edit the image in other ways, you will need to consider using other tools like GIMP or Photoshop.
Cropping an Image
This is the same as the other two platforms. At the top of the editor (once you add/select an image), there is an option to crop the selected image. Once you click on this tool, a highlighted box will appear. You use the four arrows on each corner to drag the highlighted box to where you need it. You can see what is going to be deleted as the rest of the image gets greyed out. Once you have selected what you want to crop, you then click on the tick at the top of the editor to confirm.
Scaling an Image
Once you access the main overview screen of your account, you will be able to select a template size (poster, presentation, banner etc.). This will then open a new screen that has a white box set for the recommended dimensions. However, as we have already stated, certain social media sites need a certain size of image. So, if you are looking at publishing this image to social media or would just like a larger space to work with, you can insert custom dimensions. This creates the initial size of your working space.
Going back to what we said earlier about there being a paid version; this is where it gets in the way. If you wanted to resize the canvas you are working on, you can’t. You need to have the paid version which is a monthly subscription to be able to use that tool. It comes with many other features as well and if you are new to Canva, you get a 30-day free trial. However, you do still need to add your credit card details to have access to the free trial.
Exporting in JPEG or PNG
In the top right corner of the editor, you will see an option to download your now edited image to your computer. This gives you a drop down of JPG, PNG and two versions of PDF. You will want to use either PNG (it automatically selects this as a recommendation) or change it to JPG which is what we would suggest if you are looking for a more realistic look to your images.
Editing Your Image Using Snapseed
Google are well known for branching into different markets to offer new services. This can be seen with their mobile phone pixel and now a new mobile app. Snapseed is Googles new image editing software which enables its users to create and edit astounding images on their mobile device. This is downloaded directly from the app store and can be used immediately. It has already received many great reviews with some even saying that it surpasses photoshop.
I had a look myself at this tool by using it both on my mobile phone and on a tablet. It was very quick to load and was very easy to get to grips with. The UI is easy to understand and offers the user a quick and easy way to access all the tools. With many great features, as well, this feels like a quality image manipulation program. Some of the other apps that can be found are mostly given negative reviews and from testing, are ad filled. Most of the other applications require you to deal with occasional pop ups while editing or when you start the program. Others have a constant ad that runs along the bottom of the application. These kinds of apps can be a rather large nuisance and I am yet to experience that with Snapseed.
Cropping an Image
As with any tool, Snapseed has a quick and easy way to crop an image. Amongst the many tools it has available, you can select the crop tool which then highlights the whole image in a grid box. You then, like Canva, brag the corners of the box until it covers what you would like cropped out. You then can tap the tick in the bottom right of your screen to confirm your selection. This platform makes it very easy to crop and edit the image to your requirements. The crop tool has an aspect ratio as well which gives you even more choices when cropping the image.
Snapseed even offers a way to expand the image. This means that the software will attempt to use what it already has available to extend the image to your specifications. This doesn’t work as well as the other tools, but that is to be expected. With each image, you get different results and you can see this in tool in action in the Snapseed Introduction video on YouTube.
Scaling an Image
Compared to other image manipulation platforms, Snapseed lacks in the ability to resize an image to a specific height or width. You can set a specific sizing for the image to be resized to when you export it, but that is your only option. What we suggest is that you take the image you need to edit with you, edit the image with the necessary tools and then put it over to a PC or laptop to resize it if necessary.
To access the image details is gained through pressing on the triple dots which will be in the top right when looking at the overview of the image. When you tap on the three dots, you will get a drop down to appear where you can access the images details. Press on that and you will be shown the details of the image.
In the first image above, there is also a settings option. If you wished to export the image in a larger size, you must select this and it will give you a range of options to choose from. You can select any of these and once you are done, can use the export option to export the image in the new specified size.
Exporting in JPEG
If you hadn’t noticed already, but the sub-title to this part is different from the others. That is because Snapseed does not export images in PNG formats. It only exports images as JPEGs. You can edit the quality and size of the image in the settings menu as mentioned previously, but they are the only options available to customise the export. To access the export option, there is a download icon at the top right of the image overview screen (as shown in the image below). The first icon is the one you need that when tapped on, opens a menu. From here you can share the image or save and export it.
Uploading Your Image
The final step in optimising images for the web is to upload them. Before you upload the image, you need to make sure the image name benefits where you are placing it. Once that has been corrected, it is as simple as uploading it to the site. The process does not stop here. Images have alt tags which are what are shown if the image does not appear on the site. If a computer is not able to load the HTML or coding that puts together your website, a text format will appear instead. The images will then appear as a line of text. This is the alt tag. This will need to describe the image so someone understands what it is supposed to be. Once this has been specified and the image has been put in its place; you are done.
It is processes like this that most business owners miss out. To give your own website an edge in the online market and give your website a faster loading time; you will want to consider going through the steps mentioned within this article.Back