Showit Image Size Best Practices

Need to add some new images to your website? Believe it or not, you can’t (or at least you shouldn’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. (Get your first month of Showit FREE!)

Maybe you had 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 Image Filetypes  

Before we dive into image optimization, it’s important to discuss image filetype. The image filetypes that Showit accepts are:

• JPG
• PNG
• SVG
• GIF

JPG files are what the majority of images on your site should be — canvas background, brand images, headshots, galleries, etc.

PNG files can be used minimally, when a transparent background is necessary — such as logos, graphics, and illustrations. In general, PNG files are larger than JPGs, so it’s best to use them sparingly.

SVG files are an even better option for logo files, as the file size is smaller and it is vector-based (Scalable Vector Graphic), so it displays a sharper image. If your designer didn’t provide you with SVG files for your logos, you should request them!

GIF files are to add animation to your site. GIFs can be really large, so be sure to use these minimally.

While some website builders have begun using WebP files for images, Showit still uses JPG as their primary image filetype. Therefore, in this article, we are specifically referring to JPG images.

Showit’s Image Size Recommendations 

Showit recommends JPG 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. For most blog posts and photo galleries, 1600px is a sufficient image size.

Optimizing Your Images

There are three steps you need to take to optimize the images before adding them to your site. The first is to resize them, the second is to rename them, and lastly you need to compress the files. A step-by-step guide on how to optimize your images is outlined below.

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 Red Ketchup Bulk Resizer or Adobe Lightroom. If you are a photographer or have access to Lightroom, it’s a much easier and faster process. But Red Ketchup is a great FREE option for business owners. Here are the detailed instructions for each: 

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-6 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. Rename your images – When using Adobe Lightroom, you have the option to bulk rename your images before exporting. Jump to Step 2 – Renaming Your Images below and read about image renaming best practices, and then export using these setttings: 
   • File Naming: Custom Name
   • Custom Name: your-general-image-description-
   • Start Number: 1
6. Click “Export Photos” in the top right corner
7. Create a new folder named “Resized Images DATE” on your computer.

Step 2 – Renaming Your Images

Renaming your images is super important for SEO – so whether you’re using Red Ketchup 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-quartz-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.

How to Batch Rename Images on your Computer

If you used Red Ketchup to resize your images, or if you already have web-sized images from your photographer, here is how you will bulk rename them:

1. Open your folder (ex: Resized Images DATE) and click on the top image, hold shift to select all images.
2. Right-click and select Rename…
3. In the pop-up window select:
   • Format
   • Name Format: Name and Index
   • Where: After Name
   • Custom Format: your-general-image-description-
   • Start Numbers at: 1
4. Click Rename

Note: This will batch rename as many images as you want, which is helpful for blog posts and galleries. But be sure to go back in and select 5-10 images to name uniquely for SEO.

Step 3 – Compress Your Images

Now that you’ve resized your images and renamed them, 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 slow speed and lower quality and will therefore be shown less in search engine results. 

So, here’s how to compress them: 

1. Go to tinyjpg.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 compressed.
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 with your compressed images that are ready to be uploaded to your site.

Step 4 – 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 yourself!

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!