resize_crop_images

How 2 optimize, resize & crop images


By Grant Johnstone, Ecommerce expert

10th December 2018

Summary:

Images that you publish online can add huge value to your brand if you take more care in preparing them correctly. Most site-visitors are first attracted by your visual content, and will then look at real facts before making a decision, so it is worthwhile putting lots of attention to the images that you add to your web-content.

Outcomes:

  • Right-sized images for faster loading
  • Save on data costs when uploading
  • More visually appealing images for your site-visitors

Steps

Step 1: Decide on your image sizes

Start by deciding what size image you wish to publish, or what size your website picture-frames are set to so that you can resize your images accordingly.

Image sizes are measured in pixels, so an image measuring 300 x 250 pixels means that the width of the image is 300 pixels, and the height is 250 pixels, as per this example which is the actual dimensions:

An image also includes a dpi (dots per inch) setting. Images for use on websites need only be 96 dpi, however be aware that any image that you wish to use for printing needs to be set to 300 dpi and changed to the CMYK colour model.

Websites including eCommerce sites will in most circumstances allow you to upload any sized image, as any image that you publish is loaded into a frame. Your image will thus shrink to fit the frame size. Some frames define the width and height, and with modern designs, the frame may just define the maximum width, or maximum height. This allows for the image to display without the dimensions being distorted and which can blur an image. It is thus important to upload images that have already been resized to an applicable dimension suitable for the web.

Also be aware that if you load a smaller image than the actual frame, the image will be blown up resulting in blurring.

Some websites and including eCommerce sites also include a feature called a light-box. This means that when you click on an image, it will open up in a new and bigger frame so that you can view it better. In such a case, it will be wise to resize your image to a more appropriate size such as 600 x 450 pixels.

Modern cms-platforms like WordPress also include functionality that automatically creates additional image-sizes when you upload a new image. This is useful for theme-designs that define picture-frames to render a specific image-size, and which is widely used in eCommerce websites.

Step 2: Resize your images

To now resize and crop your images, you can make use of Microsoft Picture Manager on your PC (if you have Office installed), or an online service such as resizeyourimage.com.

To make use of Microsoft Picture Manager:

  1. Open up your picture folder on your PC using windows-explorer
  2. Double click on the picture you wish to edit
  3. Select File > Open with > Microsoft Picture Manager
  4. Once the application is open, click on “Edit pictures”
  5. On the right-side of your screen you will now see options including “crop” and “resize”

Step 3: Editing guidelines

When starting with the editing of a picture, follow the following steps:

  1. If your picture includes lots of space around the specific part of the image which you wish to bring attention to, you will first want to crop your image, then resize, and do final cropping to get to the actual dimensions that you want.
  2. If you are happy to share the full image as it was taken, then first resize, and then do final cropping to get to the actual dimensions that you want.

Step 4: Publishing pointers

And finally here are a few pointers to be aware of when publishing images:

  • Larger images take longer to load on a website and use up more data. It is best to upload images not more than 600 pixels in width
  • For a full-width header-image on a website, use an image with a width of 1920 pixels
  • If your website allows you to add text over your images, ensure that the images that you use will allow the text to be prominent enough
  • Try and use images without a plain white background, or add a border to your images
  • Publish images on a web-page which have similar contrasts . i.e. a very bright image may not look good placed next to a plain looking image
  • Use images which depict movement, invoke emotion, and are inspirational. And on your home-page, always publish images showing the expected results from using your product or service. "Before" images are best to display on a specific web-page and once a prospect has already been inspired by what you can do for them
  • If you wish to source images on the web, try searching for “free stock images or photos” on Google
About The Author

Grant Johnstone

Grant Johnstone is a successful entrepreneur who has developed systems to help entrepreneurs to set up and sell their products online more easily, including an easy-to-use template online-shop system called Diwi. www.diwi.co.za

Comments are closed.