You usually don’t think about image prep until something goes wrong. A photo won’t upload because the file is too large. The image uploads into the library, but looks blurry when you use it on a page. Or something looks fine on desktop and completely off on mobile.
That’s when the questions start.
Did I import or export the file incorrectly?
Is Showit doing something strange?
Do I need to resize it again?
In most cases, the issue isn’t Showit – and it isn’t that you missed some hidden setting.
Image problems on Showit usually come down to a small set of variables. Once you understand them, image prep stops feeling so unpredictable. You don’t need to memorize a dozen rules or re-export files endlessly. You only need a reliable baseline to work from.
Once you have that baseline, most of the stress disappears. Images load cleanly. Cropping makes sense. And when something does look off, you can usually tell why – and what to adjust – without starting over.
The Two Reasons Images Usually Go Sideways in Showit
When images don’t show up the way you expect on a Showit site, it’s almost always because of one of these:
1. The image is larger or heavier than it needs to be
Oversized images slow load times, trigger upload warnings, and can look blurry once compression is applied.
2. The image shape doesn’t match the space it’s going into
Showit is very flexible, but it can’t change an image’s proportions. When the aspect ratio is off, images crop in ways that don’t match your original intention.
If you solve for size and shape, you solve most image problems.
Image Size vs. Image Dimensions
This is where things often get mixed up, so it helps to separate the terms.
Dimensions refer to how wide and tall an image is, measured in pixels.
File size refers to how heavy the image is, measured in MB or KB.
These two things are related, but they’re not the same.
You can have a very large image with a relatively small file size, or a small image with a surprisingly heavy file size. Both scenarios cause different problems once the image is on a website.
For Showit, you’re balancing two goals at the same time:
- Dimensions large enough to stay sharp on modern screens
- File sizes small enough to load quickly and avoid compression issues
Both matter. But they matter for different reasons.
If an image is too small dimensionally, it will look soft or blurry when it’s stretched.
If an image is too heavy, it can slow your site down or get compressed in ways you don’t control.
Once you start thinking about dimensions and file size as two separate levers, image prep becomes much easier to reason through – and a lot less trial-and-error.
Recommended Image Sizes for Showit
You don’t need exact numbers to get good results. Reasonable ranges are enough.
What matters most is that your images are large enough to stay sharp, without being so large that they slow your site down or get over-compressed.
These ranges work reliably for most Showit sites:
Full-width images and hero sections
- Width: 2400–3000px
- File size: ideally under 500KB
Standard content images
- Width: 1500–2000px
- File size: under 300KB
Small images and detail shots
- Width: 800–1200px
- File size: under 200KB
You don’t need to hit these numbers perfectly. If you’re in the neighborhood, you’re doing fine.
How To Determine Image Size
Before you upload an image, you can check both its dimensions and its file size.
On most computers, this information is available by right-clicking the image and selecting Get Info (Mac) or Properties (PC). Design tools like Canva or Lightroom also show dimensions and file size in their export settings.
Once an image is uploaded to Showit, you can see its dimensions directly in the image settings panel.
You don’t need to check this obsessively. This is most useful when something feels off – an upload warning appears, an image looks softer than expected, or a file feels heavier than it should be for how it’s being used.
When you know what you’re looking at, it’s easier to decide whether an image needs adjustment or can be left alone.
What to Do If Your Images Are Too Big
Oversized images are one of the most common reasons a site feels slow or triggers upload warnings.
Before uploading anything to Showit, it helps to check two things: the image’s dimensions and its file size. Catching issues here prevents problems later – especially the kind where an image uploads into your media library without complaint, but falls apart once you try to place it on the page.
A clean process looks like this:
- Check the image’s dimensions and file size
On your computer, right-click the file and view Get Info (Mac) or Properties (PC). If you’re exporting from a design tool like Canva or Lightroom, both the dimensions and file size are visible in the export panel before you download the image. - Resize the image to the width you actually need
Resizing happens before the image ever reaches Showit. This can be done inside tools like Canva, Lightroom, or a simple browser-based resizer such as ImageResizer.com. Set the width based on how the image will be used on the page. A 6000px-wide photo doesn’t add visible quality on a website – it only adds weight. - Compress the file after resizing
Once the image is resized, run it through a compression tool like TinyPNG or Squoosh to reduce file size while preserving visible quality. Compression should always be the final step before upload.
Always resize first, then compress.
That order matters.
When images are sized and compressed before they’re uploaded, they’re far more likely to work smoothly once placed in Showit – without warnings, lag, or unexpected degradation.
Why Images Look Blurry (And How to Fix It)
Blurry images usually show up after you’ve resized an image or adjusted its placement – which makes them especially confusing. Nothing looks obviously wrong, but the image no longer feels sharp.
In most cases, blur comes down to one of three things:
- The image was exported too small and then stretched larger in Showit
When an image is scaled up beyond its original dimensions, Showit has to invent pixels. That’s when sharpness disappears. - The image was heavily compressed before it was resized
Compressing an image removes data. If you compress first and then resize, you’re enlarging an already thinned-out file. - The original image quality wasn’t strong enough for that placement
Some images simply don’t have enough resolution to work well in large or full-width sections.
The most reliable fix follows the same rule as before:
Resize first. Compress second.
If an image still looks blurry after being properly resized and compressed, that’s usually a sign the original file isn’t strong enough for how you’re trying to use it – not that you did something wrong in Showit.
Aspect Ratio and Cropping in Showit
Aspect ratio is simply the shape of an image – wide, tall, or square.
When an image’s shape doesn’t match the space it’s placed into, cropping issues start to appear. Historically, this is where Showit sites could feel frustrating to work with.
That’s changed.
Showit now allows you to crop images directly inside the platform. Once an image is placed, you can:
- adjust the crop visually
- choose exactly which part of the image is shown
- apply different crops on desktop and mobile if needed
This gives you far more control than before. But cropping tools can’t change the underlying structure of an image.
A deeply vertical, editorial-style photo will still struggle in a wide hero section. A panoramic image will still feel constrained in a tall, narrow space. Cropping can refine an image’s placement – it can’t turn one shape into another.
The strongest results come from starting with an image whose natural proportions roughly match the space it’s going into, then using Showit’s crop tool to fine-tune from there.
Desktop and Mobile Are Two Different Layouts
Showit treats desktop and mobile as separate layouts. That flexibility is one of its strengths, but it also means images often need different handling in each view.
An image that works well on desktop doesn’t always translate cleanly to mobile. Wide images can feel cramped. Important details can get pushed out of frame.
When this happens, you have two practical options:
- Duplicate the image and apply a different crop for mobile
This gives you control over what stays visible without compromising the desktop layout. - Choose images with extra breathing room
Images with space around the subject are more forgiving across screen sizes and require less adjustment.
If something looks fine on desktop but wrong on mobile, it’s usually a layout issue – not an image failure.
A Simple Image Prep Workflow You Can Reuse
When you want image prep to stay predictable, the same sequence works every time:
- Resize the image to the dimensions you actually need
- Export as JPG for photos or PNG for graphics (logos, text-based designs, icons, illustrations)
- Compress the file to reduce its weight
- Upload to Showit and place it without stretching
This workflow keeps image quality consistent and prevents most issues before they show up on the page.
Free Tools That Make This Easier
You don’t need a complex setup to prep images well. A small set of reliable tools is enough.
- Canva – useful for resizing images and exporting at the dimensions you need
- TinyPNG – straightforward compression with minimal decision-making
- Squoosh – more control if you want to fine-tune compression settings
- ImageResizer.com – quick resizing without opening a design tool
Any of these can handle resizing or compression effectively. The goal isn’t to use every tool – it’s to have one or two you trust and use consistently.
What Not to Stress About
You don’t need pixel perfection.
You don’t need to memorize image sizes.
And you don’t need to re-export files that are already working.
If an image looks sharp, loads quickly, and behaves as expected on both desktop and mobile, it’s doing its job.
At that point, the best move is to leave it alone.
Image prep isn’t about control – it’s about removing friction. Once images stop calling attention to themselves, you’re free to focus on the content, the layout, and the experience you’re actually trying to create.
That’s enough.
Read the Comments +