The need for image resizing (APCG web design advice)

Images for use on all websites need to be suitably sized and optimised for internet use.

If large images (e.g. direct from a camera, scans or even other websites) are uploaded to a website they can massivley slow down the loading of pages on people's computers, tablets or phones. This can effect things like Google search rankings for your site and in general is not a good idea for all sorts of functional reasons.

It is therefore important to reduce large images in size (in pixels and megabytes) BEFORE uploading direct to the site for inclusion in site artilcles, blogs or any webpage.

This page therefore provides (below) a "tool" for resizing and optimising images which should always be used BEFORE uploading them to the actual APCG website space.


PLEASE NOTE

  • The tool helps set a maximum width to images. The maximum column width of pages on this site is 1140 pixels wide (that's for full-with large image that will occupy most of the page on a large resolution screen).
  • The tool on this page doesn't actually upload anything to the internet, the "cloud" or the website, it simply assists in resizing images directly on your device and then saves the optimised resulting file(s) in your downloads folder ready for you to properly upload to the APCG website to use when creating or editing a webpage.
  • The tool is provided here as an extra facilty on a special private APCG webpage (for APCG Staff use only who know the link).
  • Anyone creating or editing new APCG webpages should ensure all images that will be used are "optimised" with this tool BEFORE uploading to this site.


USING THE TOOL

Simply drag and drop one or more images from your computer onto the drop zone. The process shouldn't take long at all for just a few images because nothing is ever uploaded anyway (it's all done via your device). You should shortly notice your browser/device is saving a file in your browser downloads folder.

For a single image, you can use the resultant file straight away, for two or more images you will find a "zip" archive file in your download destination fiolder. Unzipping this file will give you all your images ready to upload to the site.


RENAME THE FILES AND CREATE FOLDERS (IMPORTANT)

When the images have been optimsed they are nearly ready for upload to the site, however, it important to rename files suitably (for web use) and create folders for them on the site that help categorise them sensibly and to avoid complications. Please read the separate notes on how to use the "My Drive" feature of the web design software (LINK TO FOLLOW - NOT WRITTEN YET).


Note:
This tool can be used on mobile phones and tablets. The optimsed files will save to your device. If it's more than one image, you will need to ensure you have enough free space and use an app that can unzip the archive file (or transfer it to your computer and do it there).

Note:
Sometimes images from phones or cameras may come through with their rotation incorrectly set (e.g. rotated 90 degrees or upside-down). When this happens it is best to find other tools/apps that can rotate the images before uploading to the site, however, there are some useful image manipulation tools within the website builder that appear when loading images into a page that can do various things like rotate, edit, crop, etc. (though it is best to do this before uploading to the site especially when there are a few)

The Resizing Tool

Set longest side to maximum
(1140 pixels)

Only use this one for images that you want shown very big (e.g. on whole page width). The "Drop Zone" on the right is the main resizer tool to use. It will create files on your computer where all the images will be resized to 1140 pixels on their longest size.

Please note: If you resize images that are below 1140 pixels on the longest side, they will be scaled up and will look blurry. If your images are already less than 1140 (on the longest side) you can skip this stage and upload them directly to the site unless either of the following three resizing options apply (please read the descriptions).


If you have images that are less than 1140 pixels on their longest side, you can use any of the ones below depending on what their final use might be. If for instance you are using some images that will only be used quite small (e.g in one of the one-third page-width columns on this page) then drop (or open) your images on the "420 pixels" resize tool. Just use some common sense when deciding what to size things to.

it's all about making sure the site stays running fast, especially when a photo-gallery may be used or if there just are loads of photos to show, but only need to be shown at small sizes.

Set width to maximum
(860 pixels)

Use this one when the images are already below 1140 pixels on their longest side, but greater than 640 pixels.

This one can also be used for most general image resizing (it'll help a bit more towards site-loading speeds), unless you will be wanting to definately use images at absolute full width of this page's column width, in which case use the one above.

Set width to maximum
(640 pixels)

Use this one if you images are already lower than 860 pixels on their longest side (but greater than 420 pixels), or when you know the images will never be needed to fill about half of this page's column width

Set width to maximum
(420 pixels)

Use this one if you images are already lower than 640 pixels on their logest side, or when you know the images will never be needed to fill about one-third of this page's column width


For ways to further optimse images, please see:

shortpixel.com

tinyjpg.com

tinypng.com


All offer a free level of service and it's surprising how much more site-speed can be gained in size/space/download savings by additionally using these services (but these services can't scale them first or after).


This tool is also useful, it can crop, resize and optimse:

https://imageresize.org


This looks interesting for all round image editing (as yet untested):

http://www.pictools.net/