Naming and Resizing Images – Tools & Best Practices

It is extremely important that we all follow these best practices when adding images to customer websites because:

  1. Large image files = slow load times, excess usage of our server space
  2. Poorly named image files (e.g. ThinkStockPhotos-235q34634.jpg or Webp.net-resizeimage.jpg) = no SEO value, impossible to search for in WordPress or GetResponse media galleries
  3. Duplicate images waste space and create clutter. Avoid duplicate images in WordPress and GetResponse – before uploading, use the search box in WP/Ctrl+F in GetResponse to see if it’s already in the media gallery

Here are the best practices, steps, and tools for naming, resizing, and compressing images.

The Naming of Images

It’s important to remember to rename the image files to describe, in a broad sense, the contents of an image. If it is specific to a customer or location it can include that as well. For example “Orchard Inn Room 1 Bed,” “Fort Lauderdale Beach Park,” or “Family Playing on Beach”. This will also help you find them later in the WordPress or GetResponse media galleries. Make sure to use the description in the Alt text in WordPress as well (NOT the Title field).

Resizing and Compressing Images

A good overall rule of thumb with website images is that you want them to be as big as can be displayed, but no bigger, because larger images can lead to slow page load times.

For most Q4Launch websites, featured images display at 1500 x 609 pixels. Some homepage featured images are 1800 x 818 pixels – if this is the case it will be specified in the Featured Image box when editing the page. A few websites have custom header sizes that are even larger, so make sure to check.

If an image you upload is a bit bigger than that (e.g. 1500 x 1000 pixels), it will be cropped/resized automatically for the featured image slider, but you can use the full-size version in a gallery.

In terms of file size, the smaller the better but you definitely want images to be well under 500 kilobytes (kb), ideally under 300 kilobytes (kb) for featured/hero images. Smaller, in-page images should be even less – under 150kb is realistic.

Note: While you can resize images in WordPress, it is not the best approach. It is much better to resize and compress images before you upload them.

For resizing/compressing a single image:

  1. MS Paint: If you just need to resize a single image, MS Paint works surprisingly well (use the Resize button and type in how many pixels wide you want your image to be – the height will adjust in proportion). I recommend saving the image as a copy, so you have the original, full-size image as a backup.
  2. TinyPNG: Tinypng.com is the single best image-compression tool I’ve found in terms of reducing file size without loss to quality. However, it only compresses images – you can’t use it to resize them. If you just need to quickly compress an image, it’s my go-to.
    • If you need to resize an image as well, resize it FIRST in MS Paint and then run it through TinyPNG.
    • You can upload using the traditional dialogue box, or you can simply drag-and-drop images from your computer, or even other websites, over to the TinyPNG tab in Chrome and it will compress them.

Other Programs:

  • ResizeImage.net: Useful for simultaneously resizing and compressing an image. Works fairly well, but is not quite as effective as the MS Paint / TinyPNG combo, above.
    • Upload the image to http://resizeimage.net/. First, reduce the width to between 1500-1800 pixels (Step 4). The height will adjust accordingly by default.
    • Then, compress the image (Step 7 – select Normal Compression and set Image Quality to 87%). Leave all other settings unchanged.
    • Click “Resize Image,” Download the resized image (save in a separate folder so you don’t overwrite the original high-res image) and upload it.

For resizing/compressing all of the images in a folder at once:

  1. Go to https://sourceforge.net/projects/icompress/ and download the program Mass Image Compressor. Follow the directions to install it.
  2. Once it’s installed, open it. At the top is a box to select the folder with your images.
  3. Set Quality to 85% (you can click to see a preview at the bottom to make sure the image doesn’t look degraded at all. Usually 85-90% has no visible quality change).
  4. Select Fixed Width and set the number to 1500 pixels
  5. Click Compress All
  6. You’ll then have a folder with all the compressed images in it (it automatically creates a folder within the existing one called “Compressed”)
  7. You will still need to review file names.

Leave a Reply