Resizing Photos and Images for Web

27.01.2016

Facebook Google Plus Twitter LinkedIn

Have you recently tried to upload images to your Zimpleweb CMS? Are you looking for some tips on what's the best approach to doing this?

Below is our guide to uploading images to your website; why you need to upload resized images and how to go about achieving an effective result.

 

Incorrect aspect ratio can affect page design

There’s a couple of main reasons why you need to resize your images with the first referring to the aspect ratio of the image you’re uploading. To understand aspect ratios, simply think in terms of geometric shapes. Some images need to be square, others rectangular. The rectangular images might need to be tall and others wide. Choosing the right image, with the right shape or  aspect ratio is very easy to do; but is often overlooked.

If an image you wish to upload is not at the same dimensional ratio as the frame it’s intended to sit within, then you will see issues with the design of the page that it’s displaying on. An example of this could be that the image you’re wishing to upload is of a higher height than the frame it is to go in.

Even if your image was the correct width, the difference in height would cause the contents of the page to sit lower on the page than before uploading the image. If the layout of this page is similar to others within your website, having an image that isn’t the correct ratio would cause an inconsistency in your website pages.

Now to keep things zimple, we’re not going to talk about responsive design considerations but if there’s enough interest we can write a follow up article addressing the impacts responsive design has on images.

 

Un-optimised images can slow speed

Another main reason why resizing your website’s uploaded images is a necessity, is all about the speed in which your pages load. This mostly relates to your website’s user experience but it’s also been shown that if your website has long load times or unoptimized experiences, then this can negatively impact on your website's rank in Google (both paid and organic).

A page with images that haven’t been resized and are considered high resolution would cause issues with loading times. All images uploaded to your website need to be optimised for web in order to have efficient and effective page load speeds. Above all, this is potentially the most important argument for resizing your images before uploading them to your website.

Understanding why you need to resize your images to get efficient and effective outcomes will help when taking on the task of actually resizing them.

There’s many way in which you can resize your images, below are some we recommend.

Firstly though, make sure any images you’re intending on uploading have a high resolution. This will eliminate any chance of pixelation that could occur with low quality images. 

The best way to know if an image is high resolution is by making sure it’s the original file, straight from the camera. Images grabbed from your old website or any other web source, including screenshots are already going to be optimised for web but potentially not for the purpose you’re intending which may cause blurry, pixelated images. An exception to this is any images you have purchased and/or downloaded from stock imagery sites. 

Once you have your high resolution image(s) you need to decide which program or service you’re going to use to do the resizing. We recommend Adobe Photoshop, GIMP or image resizing websites.

Adobe Photoshop is our go-to program for all image related tasks and is our biggest recommendation but it does cost money to download. If you’re looking for a free to use/download program, an alternative to Adobe Photoshop is GIMP (GNU Image Manipulation Program). For the task of resizing images GIMP is a capable program. But if you’re looking for an online solution a simple Google search will bring up a range of image resizing websites. Although there isn’t a particular website we recommend, if you’re unable to download Adobe Photoshop or GIMP, any of those websites should do the trick.

The next step in your image resizing adventure is locating, in your CMS, the image dimensions needed to resize your images effectively. Usually they can be located near the upload button or image title of the page or section you’re uploading into. Use these dimensions in order to resize your images to the correct dimension for your website.

In regards to specific instructions, each application you use to resize your image(s) will have their own way you need to go about resizing. If you need specific help there are tonnes of easy to follow tutorials on Youtube that can help you.

You should now have everything you need in order to make sure the images you upload to your CMS are the right size and that they’re going to produce efficient page speeds. If you have any questions we’re more than happy to help and our services can be hired to resize your images and make sure they are going to be good for your website.

Dillon
Dillon
UX Designer

Graduating from the CATC Design School, Sydney, in 2014, Dillon already has the experience of designing over 150 business websites. Although his expertise lie in digital design, whilst studying Dillon founded his own magazine which resulted in him being awarded the DIA (Design Institute of Australia) Professional Encouragement Award.

Like what you read? Sign up to our blog for some delightful insights into the wonderful world of design
Oohhh myy gooshh you Clicked the link!!???

There are 2 buttons below, one takes you back to the zimpleweb website, the other absolutely annihilates the entire planet destroying everything in it and obliterating half of the solar system, thus turning thousands of years of human progress into small, fragmented pieces of space rubble.

HAZARDHAZARD HAZARDHAZARD
Woowwsserrss!!!!!!

While your total disregard for our entire civilisation is concerning, your willingness to take a chance and try something new (albeit armageddon) makes you the ideal zimpleweb client so you really should get in contact, ASAP!

Login to the CMS