Download our free social media marketing guide to get savvy and grow your small business.
The email you entered is invalid.
Thank you for subscribing.
By entering your email, you indicate that you have read and understood our Privacy Policy and agree to receive marketing from Squarespace.
We look at photos online all day, every day, on a variety of screen sizes. For businesses and brands, the images you use to promote your products, services, or content are important both to attract interest and to highlight details that make you stand out.
Strong imagery can get bogged down by improper sizing, causing issues like pixelation or slow page loading, which gives visitors a reason to close their browser. This means it’s important to select the right images and files so your users can have the best possible experience while they browse your website or check out your social media.
This guide will cover why it’s important to consider resizing raw images for both websites and social media, how to do so without sacrificing quality, and the best practices to consider when resizing and uploading images.
Why it’s important to resize images
There are two main reasons to pay attention to image sizes: user experience and SEO.
Resizing images benefits the users browsing your website or checking out your social media page. It doesn’t matter if they’re on their mobile device or using a desktop or laptop—today’s browsers are busy and they want to be able to see a pristine image that doesn’t impact their digital experience.
It’s easy to ignore good image quality because it’s expected. But a lousy web experience is usually caused by photos that are either far too big and take a lot of time to load, causing users to wait, or far too small and pixelated or stretched to be barely recognizable.
Resizing images can also benefit page speed, which impacts your ranking in organic search results. Page speed is the time it takes for all contents of a web page to load. Images smaller than the raw image file size (which is usually much larger than what appears on a website) load faster.
Types of image resizing
There are a few different ways to resize a photo and preserve its quality. Consider the following types of image resizing below.
Scale down: This makes the image smaller. In many cases, the quality won’t drastically reduce if you scale the image down.
Upsize: Making a small image larger without creating pixelation is tricky. You need a quality image resizing tool to upsize an image without stretching it and hurting the overall resolution.
Crop: This refers to omitting part of the image by moving in or out to capture a specific part of it. For example, a wide group shot can be cropped to only show a handful of people close-up.
How to resize images without sacrificing quality
Resizing images to optimize the web experience isn’t complicated but it does require a certain finesse to ensure your maintain the image’s overall quality. You can get the image sizes you need using Squarespace’s free Image Resizer following these steps.
1. Select file and format
First and foremost, you need to select the right image file and format. There are many different file types for images, but not all file types are compatible for use online. There are three main file formats for images, with two static options to choose from: JPEG or PNG.
A JPEG file is one of the most commonly used image file formats. They are the easiest to use on webpages because they’re compressed to reduce the image file size. Photos are usually JPEGs. A PNG format often takes up more space than a JPEG, and is used for more complex images like graphics, illustrations, logos, and charts.
2. Reduce pixels and review dimensions
Once you’ve selected your image file and the format of your choice, that image is likely (or at least should be) high-resolution and will need to be significantly reduced to fit on a web page and load properly. For web pages, consider the website display size, which is 1920x1080 for a full screen.
You can choose from pre-determined settings for common social platforms and screen dimensions. To change the focus of the image, you can shift it by dragging the shaded circle in the tool.
3. Save and download
Click Confirm Selection and click on individual images to preview what they’ll look like once resized. You can go back to make adjustments as needed. Once you’re satisfied with the way the image looks, download to a folder before uploading to your site or social media.
Recommended image sizes for social media and websites
Resizing an image can be a fairly easy and straightforward process, but only if you know the right dimensions for where it’s going to live. Image sizes for social media and websites vary by platform and the use for the image (i.e., banner vs. product photo.) Some resizing tools, such as Squarespace’s, have preset sizes to choose from. In any case, it’s valuable to get familiar with how big or small an image needs to be for your users’ digital experience.
Below are some recommended image sizes for both social media platforms and websites.
Social media
Different social platforms have different image display sizes. Here are the main file sizes for Facebook, Instagram, TikTok, LinkedIn, and X.
| TikTok | X (formerly Twitter) | ||||
|---|---|---|---|---|---|
| Profile photo | 170 x 170 px | 320 x 320 px | 200 x 200 px | 400 x 400 px | 400 x 400 px |
| Landscape | 1200 x 630 px | 1080 x 566 px | 1920 x 1080 px | 1200 x 627 px | 1600 x 900 px |
| Portrait | 630 x 1200 px | 1080 x 1350 px | 1080 x 1920 px | 627 x 1200 px | 1080 x 1350 px |
| Square | 1200 x 1200 px | 1080 x 1080 | 1080 x 1080 px | 1080 x 1080 px | 1080 x 1080 px |
| Stories | 1080 x 1920 px | 1080 x 1920 | 1080 x 1920 px | N/A | N/A |
| Cover photo | 851 x 315 px | N/A | N/A | 1128 x 191 px | 1500 x 500 px |
Websites
Sizing images for your website is about where that image will sit on the page and the purpose it serves.
| Type | Desktop | Mobile |
|---|---|---|
| Hero image | 1280 x 720 pixels | 360 x 200 pixels |
| Background image | 2560 x 1400 pixels | 360 x 200 pixels |
| Website banner | 1200 x 400 pixels | 360 x 120 pixels |
| Blog image | 1200 x 800 pixels | 360 x 240 pixels |
| Social media icons | 32 x 32 pixels | 48 x 48 pixels |
| Thumbnail image | 300 x 300 pixels | 90 x 90 pixels |
Best practices for resizing images
Getting your image sizes right is relatively straightforward once you know what to aim for. But there are a few rules of thumb that can keep the process running smoothly for you every time.
Use high-resolution images. They may take up more storage space, but high-resolution images are the easiest to resize and manipulate for different purposes.
Resize incrementally. Despite knowing all of the image file sizes for social media platforms and websites, consider resizing images incrementally to see how the pixels are showing up and if the image or visual is stretching.
Keep original files. Always keep your original image files in case you need to make multiple adjustments or create different resized images. Resizing an already resized image can hurt image quality, and you may need the original in the future.