As a web developer, one of the most common speed bumps in a project isn’t the code — it’s the images.
Clients often ask:
“What size should I send?”
“Do I need to crop them?”
“Should I compress them first?”
And while it might seem like a small detail, image size and quality can make a massive difference — to both how your site looks and how quickly it loads.
Let me walk you through the essentials, so you can prepare your images with confidence and avoid common mistakes.
Let’s Start with the Basics: What Makes Up an Image File?
When we talk about image size, we’re usually referring to one of two things:
- Dimensions — the width and height of the image in pixels (e.g. 1024×768)
- File Size — the actual weight of the file in kilobytes (KB) or megabytes (MB)
Here’s where it gets a bit more nuanced. A few other attributes affect how an image displays — and how much space it takes up:
- Resolution (DPI): For screens, 72 DPI is standard. Anything higher (like 300 DPI) is useful for print, but it just adds file size online.
- File Type: JPGs are best for photos, PNGs for logos or graphics with transparency, and WebP for fast-loading sites. TIFF and BMP files? Best left off the web.
- Compression: Some formats are naturally compressed (like JPG), while others are lossless or much heavier by default (like PNG or TIFF).
- Colour Depth: More colours = more data. For most web use, 8-bit or 24-bit colour is more than enough.
Why Your Web Developer Prefers Full-Quality Images
This might sound counterintuitive, but the best thing you can do is:
Send the highest quality version you have — and let your developer do the resizing.
Why?
- Cropping or shrinking an image before sending can lock in bad dimensions or poor framing.
- Tools like WhatsApp or email (especially on mobile) automatically compress your images, often ruining the quality before we even see them.
- It’s far easier to work from a large, high-quality original and create multiple versions as needed for desktop, mobile, thumbnails, and galleries.
In other words: don’t try to “help” by shrinking or editing images unless your developer has guided you to do so.
The Ideal Image Dimensions (Real World Example)
On a recent website project, I asked the client to send imagery for their product galleries. What came through was a mix of camera-quality images, social media screenshots, and blurry re-saved images — all in different dimensions.
What worked best?
Images around 1024 × 768 pixels — a balanced 4:3 ratio that looks good across most screen sizes, doesn’t overload the site, and keeps the gallery looking uniform.
If the photos had been sent already cropped to odd sizes, I wouldn’t have been able to correct layout issues or apply effects like zoom and lightbox properly.
Common Image Mistakes I See from Clients
- Sending images via WhatsApp or Messenger (they compress automatically)
- Cropping the subject too tightly
- Using screenshots or photos taken from social media
- Mixing portrait and landscape in galleries without context
- Forgetting about mobile view — vertical images can dominate the screen
- Sending 300 DPI print images that are 8MB+ in size (unnecessarily heavy for web)
How to Prep Images the Right Way
If you’re working with a developer or designer (like me), here’s the simplest route:
- Send the original photo — ideally by Google Drive, Dropbox, or WeTransfer
- Don’t crop or edit unless asked
- Include a note or filename if a specific image should go in a particular section
- Let us know if any images are particularly important or priority for showcasing
Final Thought: Quality First, Resize Later
Websites are visual by nature. Blurry, pixelated, or oddly cropped images can cheapen even the most well-designed layout. On the other hand, high-quality, well-composed images give a sense of professionalism and care that no plugin can replicate.
If you’re ever unsure, just ask. I’m always happy to guide clients on the best way to prepare their images — because a few small steps at the beginning save hours of frustration later.
Want help preparing your images?
If you’re working on a new WordPress site or planning a refresh, I can help guide you through preparing images, choosing layouts, and making your visuals shine.
Book a 15-minute call and let’s get your project moving in the right direction.
