This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.

What this guide covers

  1. Getting started with image editing apps
  2. Image styles and optimised sizes
  3. Getting set up for multiple image sizes
  4. Create multiple image sizes
  5. Crop an image (Aspect ratio)
  6. Remove background for images
  7. Create photo collages
  8. Further support and guidance
 
1. Getting started with image editing apps

There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.

Where do I start?

  • We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
  • We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.

Do I need an account?

  • Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
  • Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version

Workflow: Create, edit and repeat

Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.

 
2. Image styles (including image aspect ratios) and optimised sizes 
Before we jump in there are some default sizes and sizes to consider when preparing images  

Image styles include image aspect ratios for displaying images on your intranet.

They can render within widgets or on pages.

Image style/
Aspect ratio

Visual reference

Suggested size
(Before upload) 

Scale

1:1

Width: 960px
Height: 960px

This style can scale up or down in widgets or on a page

2:1

Width: 960px
Height: 480px

This style can scale up or down in widgets or on a page

4:3

Width: 960px
Height: 720px

This style can scale up or down in widgets or on a page

5:7

Width: 960px
Height: 1344px

This style can scale up or down in widgets or on a page

16:9

Width: 960px
Height: 540px

This style can scale up or down in widgets or on a page

       
 
3. Getting set up to create multiple image sizes

To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets

Download file set to your local drive

Download image aspect ratio placeholder file set

Set up artboards

 
4. Create multiple image sizes

Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.

 
5. Crop an image (Aspect ratio)
 
6. Remove background from image
 
7. Create photo collage
 
8. Further guidance and support

Free web app tools

App

Guidance and support

https://www.remove.bg/upload

https://www.remove.bg/help

https://ipiccy.com/

https://ipiccy.com/help

https://www.photopea.com/

https://www.photopea.com/learn/

https://pixlr.com/editor/

https://pixlr.com/remove-background/

https://pixlr.com/learn/

https://www.canva.com/

https://www.canva.com/en_gb/help/

Paid for and licenced Software

Photoshop

Affinity Photo480

 

This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.

What this guide covers

  1. Getting started with image editing apps
  2. Image styles and optimised sizes
  3. Getting set up for multiple image sizes
  4. Create multiple image sizes
  5. Crop an image (Aspect ratio)
  6. Remove background for images
  7. Create photo collages
  8. Further support and guidance
1. Getting started with image editing apps

There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.

Where do I start?

  • We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
  • We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.

Do I need an account?

  • Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
  • Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version

Workflow: Create, edit and repeat

Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.

 
2. Image styles (including image aspect ratios) and optimised sizes 

Before we jump in there are some default sizes and sizes to consider when preparing images

Image styles include image aspect ratios for displaying images on your intranet.

They can render within widgets or on pages.

Image style/
Aspect ratio

Visual reference

Suggested size
(Before upload) 

Scale

1:1

Width: 960px
Height: 960px

This style can scale up or down in widgets or on a page

2:1

Width: 960px
Height: 480px

This style can scale up or down in widgets or on a page

4:3

Width: 960px
Height: 720px

This style can scale up or down in widgets or on a page

5:7

Width: 960px
Height: 1344px

This style can scale up or down in widgets or on a page

16:9

Width: 960px
Height: 540px

This style can scale up or down in widgets or on a page

       
 
3. Getting set up to create multiple image sizes

To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets

Download file set to your local drive

Download image aspect ratio placeholder file set

Set up artboards

 
4. Create multiple image sizes

Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.

5. Crop an image (Aspect ratio)

 
6. Remove background from image

 
7. Create photo collage

 
8. Further guidance and support

Free web app tools

App

Guidance and support

https://www.remove.bg/upload

https://www.remove.bg/help

https://ipiccy.com/

https://ipiccy.com/help

https://www.photopea.com/

https://www.photopea.com/learn/

https://pixlr.com/editor/

https://pixlr.com/remove-background/

https://pixlr.com/learn/

https://www.canva.com/

https://www.canva.com/en_gb/help/

Paid for and licenced Software

Photoshop

Affinity Photo480

This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.

What this guide covers

  1. Getting started with image editing apps
  2. Image styles and optimised sizes
  3. Getting set up for multiple image sizes
  4. Create multiple image sizes
  5. Crop an image (Aspect ratio)
  6. Remove background for images
  7. Create photo collages
  8. Further support and guidance
1. Getting started with image editing apps

There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.

Where do I start?

  • We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
  • We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.

Do I need an account?

  • Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
  • Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version

Workflow: Create, edit and repeat

Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.

 
2. Image styles (including image aspect ratios) and optimised sizes 

Before we jump in there are some default sizes and sizes to consider when preparing images

Image styles include image aspect ratios for displaying images on your intranet.

They can render within widgets or on pages.

Image style/
Aspect ratio

Visual reference

Suggested size
(Before upload) 

Scale

1:1

Width: 960px
Height: 960px

This style can scale up or down in widgets or on a page

2:1

Width: 960px
Height: 480px

This style can scale up or down in widgets or on a page

4:3

Width: 960px
Height: 720px

This style can scale up or down in widgets or on a page

5:7

Width: 960px
Height: 1344px

This style can scale up or down in widgets or on a page

16:9

Width: 960px
Height: 540px

This style can scale up or down in widgets or on a page

       
 
3. Getting set up to create multiple image sizes

To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets

Download file set to your local drive

Download image aspect ratio placeholder file set

Set up artboards

 
4. Create multiple image sizes

Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.

5. Crop an image (Aspect ratio)

 
6. Remove background from image

 
7. Create photo collage

 
8. Further guidance and support

Free web app tools

App

Guidance and support

https://www.remove.bg/upload

https://www.remove.bg/help

https://ipiccy.com/

https://ipiccy.com/help

https://www.photopea.com/

https://www.photopea.com/learn/

https://pixlr.com/editor/

https://pixlr.com/remove-background/

https://pixlr.com/learn/

https://www.canva.com/

https://www.canva.com/en_gb/help/

Paid for and licenced Software

Photoshop

Affinity Photo480