This version of this page scales images by "Longest Side"

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.


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 this website, it simply assists in resizing images directly on your device and saves the files in your downloads folder ready for you to properly upload to the APCG website when creating or editing a webpage.
  • The tool is provided here as an extra facilty on a special private APCG webpage for APCG Staff & Members use only.
  • Anyone creating or editing new APCG webpages should ensure all images that will be used are "optimised" BEFORE uploading to this site using the tool(s) on this page.


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 foind a "zip" archive file in your download destination fiolder. Unzipping this file will give you all your images ready to upload to the site.

When finally ready to upload images to the site, it important to rename files suitably and please use or create folders that help categorise images sensibly for future users, purposes and site 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 can be used on mobile phones and tablets. The files will download to your device. If it's more than one image, you will need to use and 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). When this happens you will need to find other tools/apps to rotage the image before uploading to the site, or ther are some image manipulation tools in the Web FDesgn program that should help (TO CONFIRM).

The Resizing Tool

Set width to maximum
(1140 pixels)

The "Drop Zone" on the right is the main risizer tool to use. It will create files on your computer where all the images will be resized to 114p pixels wide.

Please note: If you resize iimages that are below 1140 pixels wide, they will be scaled up and will look blurry. If your images are already less than 1140 wide 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 wide, you can use any of these depending on what the final use is. If for instance you are using some images taht 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 thinsg 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 wide, 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 wide (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 wide, 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/