Showit Image Size Best Practices

Need to add some new images to your website? Believe it or not, you can’t just add the images as-is to your Showit site. This is for a few reasons, which we’ll get into here as we go through the Showit image size best practices that you need to know. 

Showit Image Size Best Practices

You hired a Showit designer to design a beautiful new website for your business, and now it’s time to add new images to your site. Or maybe you purchased a Showit website template, and you’re planning to DIY a new site. (Click here to get your first month of Showit FREE!)

Maybe you got new brand photos taken, or perhaps you’ve completed a new project and want to update your portfolio. You might not know this, but you can’t just add those full-sized images to your site and hope for the best! 

You need to optimize them first. Optimizing your images is important for both the speed of your site, accessibility, as well as SEO (search engine optimization, aka getting your site found on Google). 

Showit’s Image Size Recommendations 

There are two steps you need to take to optimize the images before adding them to your site. The first is to resize them, and the second is to optimize the files. We’ll get into the specifics shortly, but first, since your site is designed through the Showit platform, it’s important to follow Showit’s suggestions. 

Showit recommends images to be 3500px (pixels) or smaller. However, all of your images don’t need to be this big! Images that will be used for canvas backgrounds should be 3500px, whereas all other images throughout your site can be sized to approximately 1200-1800px, depending on the original size of the image and the planned use for it.  

Step 1 – Resize Your Images

Now that you know Showit’s recommendations for image size, let’s talk about how to resize your photos. There are two options – you can either use ImageResizer.com or Adobe Lightroom. If you have access to Lightroom, it’s a much easier and faster process! But Image Resizer does the trick too. Here are the detailed instructions for each: 

Option 1 – Image Resizer:  

1. Drag and drop your images one at a time.

2. Make sure “Lock Aspect Ratio” is checked, so that your image doesn’t get distorted.

3. Change the long edge to 3500px for canvas background images and 1200-1800px for all other images.

4. Look at compression values – ideally you want it less than 2mb. 

5. Download the images and create a new folder named, “Images to be optimized.” Once files are downloaded to your computer, hold shift to select them all, right-click and select rename.

6. Rename the images. This step is super important for SEO – so whether you’re using Image Resizer or Adobe Lightroom, don’t skip it! 

A descriptive file name gives Google more information about the subject matter of your image (which helps your images and website get found in search results). You never want to upload images named “IMG_0789.jpg” or something generic like “background.jpg”. Instead, rename your images to describe what the content of the image is. Use dashes instead of spaces in your image name.

For example:

• couple-in-Wyoming-on-a-mountain-at-sunset.jpg 
• rustic-modern-kitchen-with-wood-cabinets-and-white-counters.jpg 
• guests-at-rocky-mountain-wedding-reception-cocktail-hour.jpg

Note – if you have lots of images in your blog post or on your webpage, you do not need to rename each of them uniquely. You can batch-rename them all to something descriptive yet general, and then select the most important 5-10 images to create unique names for, like in the examples above.

Option 2 – Adobe Lightroom: 

1. Create a new album in your Lightroom library

2. Upload all of your images

3. Select multiple images (you will need to repeat steps 3-7 separately for your background images and other images), click File + Export

4. Change long side pixels to 3500px for canvas backgrounds, or 1200-1800px for all other images

Then select these settings: 

Quality: 80%
Output Sharpening: Screen
Amount: Standard
Color Space: sRGB

5. Name your images – Follow the same protocol described in Step 6 for Image Resizer, but in Adobe Lightroom you’ll select the following settings:   

In Adobe Lightroom:
File Naming: Custom Name
Custom Name: your-primary-keyword-your-business-name-
Start Number: 1

6. Click “Export Photos” in the top right corner

7. Create a new folder named “Images to be optimized” on your computer.

Step 2 – Optimize Your Images

Now that you’ve resized your images, it’s time to optimize them further by compressing the file size. This step is important for both a good user experience, as well as SEO. Large image files take longer to load, and long website load speeds frustrate users and cause them to exit your website faster. When users frequently exit your website quickly, Google registers your site as lower quality and will therefore be shown less in search engine results. 

So, here’s how to do optimize them: 

1. Go to tinypng.com 

2. Drag your renamed images from your desktop folder onto the “Drop your images here!” box on the screen. The free version allows you to drag 20 images at a time to be optimized.

3. Watch the website do the image compression work for you. It will show you the original size of the image, what size percentage it saved you, and the new size of the image.

4. Click “Download all images”

5. Repeat as many times as needed to compress all of your images.

6. Create a new folder named “Upload DATE” so you don’t mix up your resized images from your optimized images that are ready to be uploaded to your site.

Step 3 – Upload Your Optimized Images to a New Folder in Showit

This last step is straightforward. In order to keep your image gallery organized and for easy access, you’ll want to create a new folder in Showit for your newly optimized images. Name your folder something that helps keep your images organized, such as: “Brand photos 09-2024” or “Portfolio – Project Name.” Once you’ve created and named the folder, upload all of the optimized images, and you can use them throughout your site’s design as you’d like!  

And finally – here’s a pro tip: ask your photographer to send you web-ready files! Most photographers have access to Adobe Lightroom and can quickly resize the images for you. This will save you the headache of resizing images one-by-one on ImageResizer.com OR save you the cost of an Adobe subscription for Lightroom.

Showit Website Designer

It can be a little tedious to go through this process when you’re adding new images to your site, but it’s really important for so many reasons. It’s definitely something you don’t want to skip! These are all of the steps we take for our clients when we work on Showit website designs. 

If you have a lot of images to update on your site, or some edits you need made in general, a Design Day with us might be just what you need! Reach out today to get your project started. 

Pin this post!