The need for proper file naming, image resizing and image/PDF optimisation.

Sorry, it's may seem a bit long-winded and complicated, but it's important to get all this correct for a well functioning site, especially one that over time will accumulate lots of pictures, files and resources. Once you get the hang of what to do and why, it's not too bad running through the process each time a new batch of photos (or files) need uploading to the site.

A 3-stage process

  1. Rename files appropritely for web use
  2. Resize files (images only)
  3. Optimise files


Images for use on all websites need to be suitably resized for their intended placement and then additionally optimised for internet use. Resizing is important due to most images from cameras or other sources often being far too big/large (in pixels and filesize) thereby drastically slowing sites down or hooging server storage space. Additionally, images can be further "optimised" (have their file-size further reduced) by running them through a secondary optimisation tool that drastically reduces the filesize yet again without any discernable loss of quality.

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 also affect 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 articles, blogs or any webpage.

This page therefore provides (below) some tools for resizing and optimising images (two different tools/processes) which should always be used BEFORE uploading them to the actual APCG website space.


STAGE 1: RENAME THE FILES AND CREATE FOLDERS (IMPORTANT)

It is important to rename files suitably for web use and create folders for them on the site to help categorise them sensibly and to avoid complications now or in the futrure.

It is also important to rename files so that they are fully compliant with web-servers for web use. This can be done before or after the "Resizing" stage (actually probably best as the first stage). Doing the renaming early in the process (before the resizing and optimisation stages) is generally a good idea. This means not useing any spaces or blank characters and just using characters A-Z, a-z, 0-9, hyphens (-) or underscores (_). Underscores can sometimes appear difficult to read or to be missing when a hyperlink gets underlined by the browser so often they aren't used either.

Always visually check through the list of file names before resising, optimising and uploading, and see that they all help describe the photos (e.g. GardenParty-2019-01.jpg) and that they never use any illegal (non-web) types of characters in their filenames, e.g. accented characters like the é in HappyCafé, brackets, commas and many of the other more complex characters available on keyboards. Remember, this is just for web file names (including things like downloadable PDFs). It doesn't matter for the written content on your site where generally all symbols and characters can be used at will but sometimes they may need special coding to show (but generally don't worry about it in web texts, it'll most often be fine.

There are many tools that can help with batch renaming of files. A quick bit of googling/research should help make such a task much quicker than manually renaming hundreds of files one by one.


PLEASE NOTE

  • The resizing tool, www.bulkresizephotos.com helps set a maximum width or height to images (it sets whichever is the longest side to the length specified. The maximum column width of pages on this APCG site is about 1140 pixels wide (that's for full-with large image that will occupy most of the page on a large resolution screen). For multi-column layouts, it obviously makes sense to not put full page-width images in narrow columns as this is just wasteful and pointless. If unsure what widths an image will be used at, one can actually sample it to two or more sizes (and rename the files appropriately), or sometimes just use the larger file in a small place (it's not the end of the world but if done for many images it could be as far as the site functionality goes).

    The resize tool is quick at doing its thing and doesn't actually upload anything to the internet, the "cloud" or the website, it simply assists (via a browser window) in resizing images directly (locally) on your device and then saves the resized resulting file(s) in your downloads folder ready for the next stages.
  • The optimsation tool, www.shortpixel.com does some further magic and drastically reduces the file size without changing the image's pixel size. This can keep sites running fast and not get bogged down with overly large files/images to download everytime someone views the page.


STAGE 2: USING THE RESIZING TOOL (bulkresizephotos.com)

Click the resize tool option (below) you think best (there are four size specifications provided). Once the link opens the bulkresizephotos.com page just drag the desired images from your computer's file manager onto the bulkresizephotos.com "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 folder. Unzipping this file (often just by double clicking it) will give you all your images ready for further processing (renaming and/or optimisation).


Note:
This resize and optimisation tools can often be used on mobile phones and tablets as well as ordinary computers. The optimised 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/easiest 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). Click the "Open Bulk Resize Photos" link (right), via the resulting page's "Drop Zone" to drop files to be resized. 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 already below 1140 pixels on the longest side, they will be scaled up and will look blurry/pixellated. If your images are already less than 1140 (on the longest side) you can skip this stage (if they are to be used big on the site) and upload them directly (after they've been optimised!) to the site unless either of the following three resizing options may be more useful (please read the descriptions).


If you have images that are less than 1140 pixels on their longest side, you can use any of the links below depending on what the images 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 longest side 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 longest side to maximum
(640 pixels)

Use this one if your 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 longest side to maximum
(420 pixels)

Use this one if your 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


Stage 3: Image Optimisation

Once the images have been renamed and resized, they should ideally be run through one of these extra optimisation tools. ShortPixel is probably easiest

See: https://shortpixel.com/online-image-compression

A similar tool is available here:

See: https://tinyjpg.com/

The images optimised by these tools can greatly reduce the file sizes (making the site run faster) and should be used particularly when you are uploading a lot of images to the site (e.g. a load of Garden Party images)


The process of optimisation is similar to that of the resizing but one has to click on the resulting file for it to download to your computer. For the free account only about 50 images can be done at a time but this shouldn't be too much of a limitation if done in batches on the odd occasional when there might be more than 50.




Stage 3a: Optimising other files, e.g. PDFs (reducing their size)

You can also optimise any PDFs you produce (best avoid uploading any Word files to the site, instead "Print" or Save-out" to PDF via Word first, this ensure the layout will show to users as intended and avoids issues/difficulties where people don't have Word or similar installed.

See: https://shortpixel.com/online-pdf-compressor


All of the above tools offer a free level of service and it's surprising how much more site-speed can be gained in size/space/download savings by using these services.


This tool may also be useful, it can crop, resize and optimise as well as various other things:

https://imageresize.org