Being Freed logo
Get in touch with me
Being Freed logo

Image sizing for your website

Image size, aspect ratio, file size, resolution: what do these terms mean, and how do you apply them to your website's pictures and graphics?
An image with the words "Resolution, noun, the amount of detail an images has", whose resolution becomes less clear across the image.

Four Basics

Aspect ratio, image size, file size, and resolution all pertain to picture and graphics sizing, and here’s a quick primer on what they are and why they matter.

Asking “what is the standard image size for a website?” is a little like asking “what’s a standard font size?”. While there’s a general range we stay within, and there are preferred aspect ratios for specific platforms, the variety is endless, so it’s important to size each image to its intended use.

When choosing the best image size for your website, we will examine where and how we’re using the image.  Will it need to be different sizes on desktop, tablet, and mobile, or will it appear the same size on all screens? 

For an introduction to image formats (.jpg, .png, .svg, etc.) see my library post here. 

Aspect Ratio

The aspect ratio of an image is the relation of its height to its width, written as height-x-width or height:width.  For example, 2×3 or 2:3.  In photography, the standard is to list height first.  You can change an images’ aspect ratio by cropping or by stretching it. 

A graphic showing image ratio, with two blue boxes which are different sizes but the same ratio.
Below is the same image at 100% aspect ratio, cropped, and stretched.
An image with the words "Resolution, noun, the amount of detail an images has".
Here's the image at its original aspect ratio.
An image with the words "Resolution, noun, the amount of detail an images has", but the image is cropped so we can't see all the letters.
Here is the same image. It has been enlarged, but still placed within the aspect ratio, so part of the picture is cropped out.
An image the the words, "Resolution, noun, the amount of detail an image has."
The same image stretched to fit a taller box. The original width is still the same but the height is different, so the aspect ratio has changed.

Image Size

An image’s size is its actual dimensions in inches, cm, or pixels.  Printed pictures are often 2×4 or 3×5, but we’re unlimited in our options online. 

A graphic showing image ratio, with two blue boxes which are different sizes but the same ratio.
The two blue boxes in this graphic are different sizes: one is 300 pixels wide by 200 pixels tall, while the other is 600 pixels wide by 400 pixels tall.

File Size

The file size is how many kb, mb, or gb the file is.  Below is a screenshot of these files in their folder.  Look at their file sizes in the right-hand column.

An image describing file size as seen in computer folders, with a 64 kb file and a 652 kb file.
You can see the different in file size in the right-hand column.

Resolution

Resolution is the level of detail an image has.  In digital terms, that means how many pixels it has.  The more pixels, the higher the resolution.  Zoom in on these two images and you’ll see the difference in clarity.  The left one is 72ppi and the right one is 22ppi.  Image resolution can be increased; I use Adobe Photoshop for that purpose.

An image with the words "Resolution, noun, the amount of detail an images has".
Here's the image at higher resolution.
An image with the words "Resolution, noun, the amount of detail an images has", where the letters are fuzzy.
The same image at lower resolution.

Image sizing apps

Images can be resized in a number of ways, some of which affect the quality and some of which don’t.  I used Adobe Suite products to resize my images, but that involves a monthly subscription, which many people don’t really need.  Below are two free online image resizers.

Images for social media

Interesting Links

Like my posts? Toss me a tip!

I’m Freed and I’m a small business owner like you. I stay current in the latest developments in WordPress website design and Mailchimp marketing so you don't have to. With my help, your site and marketing will be on-brand, up-to-date, and get results.

digital nomad hiker drysuit diver queer woman sober ukulele player scorpio Tough Mudder goofball

Freed with her ukulele while scuba diving

All content © by Freed

Want to know more about what I do?  When I have a new post?  Where I’ve been lately?  (I do get around.)  Sign up for my mailing list below.  I promise to not fill your inbox with junk.

Sign up for my mailing list

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification

Being Freed is a woman owned, LGBTQA+ owned business