Back to Main

Image Sizing Guide: Keep Your Club Website Loading Quickly

Date:

At Member Jungle, we often hear common concerns regarding the images clubs and associations use on their websites. They want to know why their images are blurry, cropped strangely, have incorrect aspect ratios, or simply take a long time to load. The almost universal answer is that they have uploaded the images in the wrong format or size. 

With that in mind, let's delve into everything you need to know about resizing images for your club's website. And I mean everything. We are getting into the nitty gritty here today, folks. Don't worry; I promise this will remain a light and entertaining read. 

Glossary Of Club Image Management Terms

The stuff we will cover today isn't that complicated, and chances are you already know most, if not all, of it. However, I'm going to briefly do a bit of refresher anyway just to make sure that no one goes into this with a handicap. After all, I would not know any of this stuff if it wasn't for people taking the time to explain it to me in the very simple terms I need to understand anything.  

Aspect Ratio

The aspect ratio of an image refers to its dimensions, such as its width and height. For example, the aspect ratio of old-school boxy TVs is 4:3. The aspect ratio of modern HD TVs is 16:9, and the aspect ratio of Instagram square images is 1:1.

 

Aspect Ratio

 

This makes sense in my mind, mainly through cocktails. For every 2 parts of vodka, there are 4 parts of orange juice. For every 16 parts width, there are 9 parts height. These aren't sizes; they're ratios. I know that a screwdriver isn't really a cocktail, but I thought the metaphor might get a little confused if I used a Painkiller as my example. 

 

cocktails meme

Image Resolution

How blurry or sharp an image looks depends on the number of pixels in it. Pixels are just individual dots of colour; the more of them you have in your image, the smaller they can be and the more detailed and smooth your image will look. 

 

Image Resolution

Fun fact: the collective noun for a group of ravens is an unkindness of ravens. #1 undefeated goth bird.   

Image resolution is written similarly to aspect ratio, first listing the width and then the height of the image. For example, a standard HD TV is 1280 pixels wide by 720 pixels tall, written as 1280x780. An Instagram square post is a maximum of 1080x1080.  

For context, a square Instagram image has a maximum of just over 1 million pixels per image, modern HD TVs have over 2 million pixels per image, and 4K monitors have over 8 million pixels. Basically, the more pixels you have, the cleaner and clearer the image, but the larger the file is, and the more powerful a screen you need. 

Remember, the number of pixels is independent of the aspect ratio.

Image Sizes For Your Club Website 

First things first, websites are exactly 1,200 pixels wide, which means that the maximum width any image on your website needs to be is 1,200 pixels. 

 

Image Sizes For Your Club Website 

 

Making your image any wider than this will not increase its size or clarity on your website; it will only increase its load time. Also, 1,200 pixels wide is plenty that’s only just under standard HD TV definition and will be more than enough for anyone viewing your site. 

This dimension of 1,200 wide will be continually valuable to you. If you want to have two images next to each other on a page, then making sure those images are no bigger than 600 pixels is key. In fact, you might even want them to be slightly less than that, so there is room for a little buffer between them.

You can stick a massive 2,000-pixel-wide image in a 600-pixel-wide spot, but it won’t make it any clearer or nicer to look at; it will only massively increase page load times and potentially throw out your image’s aspect ratio. 

Image Aspect Ratio 

Images in certain places may need to be in specific aspect ratios or have certain sizes to look their best. For example, Slideshow images need to be at least 1200 wide as they are always full width; though, as we’ve discussed, there isn’t a need to make them much wider than that. As far as the height of a Slideshow image is concerned, that’s up to you, but somewhere between 200 pixels and 600 tall would be my recommendation. 

 

Image Aspect Ratio 

 

In other places, there isn’t a required aspect ratio, but certain ratios will look best, or at least consistent ratios will look best. In Quicklinks, for example, where multiple images are next to each other, having a consistent aspect ratio will make them look neat and orderly. 

People often have problems with this; they upload their images into Quicklinks, paying no attention to the size or aspect ratio of their images, and end up with subpar results. As a demonstration of this, I grabbed some images of my work computer and chucked them into my Quicklinks widget, and this was my result. 

 

Quicklinks widget

 

In case you were wondering the third image is James May falling over in the mud.  

As you can see, having three different aspect ratios has made my three images look disparate and they don’t gel how we ideally want them to. Now, let’s look at Quicklinks again if I pay attention to the aspect ratio of the images I am selecting. 

 

Quicklinks Images

 

See how including three images with the same aspect ratio makes a big difference to how neat the Quicklinks module looks. 

Side note: at some point, the bad guys in the A-Team have really got to stop locking the A-Team in a machine shed full of tools, armour plating and a stereo full of all their favourite tank-building music. It never works out for them.  

Image Formats

JPG (pronounced jay peg), sometimes written JPEG, and PNG (pronounced P N G) are the two most common image formats. JPG-formatted images are smaller, more efficient, and load quicker. Hence, you should use them for images on your website pages. 

Images formatted as PNG can be “backless,” meaning they have a transparent background. The main reason people use PNG files is for logos and icons. Your club logo is probably saved as a backless PNG, allowing you to superimpose your club’s logo onto a banner, event image or piece of merchandise without it being surrounded by a white box. The Member Jungle logo in the top left-hand side of the screen is a backless PNG so it can sit on top of the green banner neatly without a great big box around it. 

As an example of this in action, here is the Member Jungle logo quickly superimposed over two mugs. The one on the left is a backless PNG, and the one on the right is a normal JPG.

 

Image Formats
 

So, when it comes to your club logo or any icons you use, a PNG is the best file type; for all other uses, stick to the faster loading times of JPG. 

Changing The Size & Aspect Ratio Of Images

So, you know, all the ideal aspect ratios, image sizes and formats that you should use for your club’s website. Let’s now talk about what to do if you have the perfect image but the ratio, size or format is wrong. 

Well, depending on what you need to do, there are several different options here, but let’s look at the big ones. 

Tiny PNG

Your first option is Tiny PNG. Tiny PNG is a free website that allows you to upload images formatted as JPG, PNG, and WebP and reduce the file size while keeping the image quality. This greatly reduces your website's load time without sacrificing image quality. It can also be helpful for Thumbnail images, which usually have pretty tight restrictions on how large an image file can be. 

For example, below is a picture of a Crested Pigeon, which someone once pointed out look like tiny punks with mohawks and multicoloured patched vests and now I can't unsee it. 

The point is that one of these images is 954kb, and the other one has been reduced to 112kb by Tiny PNG. Can you tell which is which?

 

Crested Pigeon

This is an awesome way to reduce image size and speed up page load times for free without sacrificing image quality. 

Member Jungle's New Image Uploader

Member Jungle has just released its new image uploader to help you adjust the ratios of images when you upload them to your website. The image uploader, seen below, lets you rotate your images, automatically crop them to predetermined aspect ratios, and free crop them. 

 

Member Jungle's New Image Uploader

 

This will allow you to easily crop your images to the exact size you need them to be. Fun fact: The A-Team images I used in the above example were not all the same aspect ratio when I found them. So, when I imported them into my Quicklinks widget, I simply clicked the 1:1 auto crop option, adjusted it to be centred exactly where I wanted it, and, well, you saw the results. They were perfect. 

 

A-Team images

Canva

Finally, the third option to resize images and change their aspect ratio and file type is Canva. I have talked about Canva before, and I will talk about it again; it is a great tool to have in your arsenal. 

With Canva, you can create images, customise their aspect ratio and size, decide which format to export them in, and a whole lot more. If you pay for a premium membership, you can even resize your design with a click of a button. 

Where To Next?

That’s about it for this article; I hope you learned something and found it as enjoyable to read as I did to write and find all the great images. 

If you want to learn more about Canva and how to use it, check out What Is Canva & How Can You Use It To Promote Your Club?

If you want more information on how to create great images for your club, then have a look at How To Create AI-Generated Images Directly From Your Club’s Website

 

Related Articles

Let's Keep in Touch

Subscribe and never miss another blog post, announcement, or special event. We hate spam and will never sell your contact information, we will only send you our monthly Member Jungle newsletter, full of great articles.