When it comes to building a beautiful, functional website, images play a huge role. They showcase your brand, communicate your message, and help your site look professional. But the wrong size, orientation, or quality can make even the best design look off.
This guide is designed to help you take, organize, and provide images in a way that makes it easy for your web designer to use them effectively.
1. Think About Orientation: Portrait vs. Landscape
One of the most common issues we see is images that only work in one orientation. Your website may need:
- Landscape images (horizontal) for banners, sliders, and header images
- Portrait images (vertical) for staff profiles, product features, or blog images
Tip: Whenever possible, take both orientations. Even if it seems redundant, having both gives flexibility for layouts, responsive design, and future updates.
2. Keep Image Quality High
Low-resolution or blurry images can look unprofessional.
- Minimum resolution: 1200px wide (for full-width web use)
- High-quality source: Shoot in the highest quality your device allows
- Avoid excessive compression: While compressed images load faster, too much compression can create visible artifacts
3. Mind the File Type
Different file types work better in different scenarios:
| File Type | When to Use |
| JPEG/JPG | Photographs with lots of colors or gradients |
| PNG | Images with transparency or logos |
| SVG | Icons or simple graphics that need to scale without losing quality |
Tip: Always send the original file first. We can resize or compress as needed for web.
4. Provide Cropping Flexibility
Even if you frame the perfect shot, websites often require different crops.
Tip: Leave extra space around your subject. This allows your designer to crop for banners, thumbnails, or squares without cutting off important parts.
5. Organize Your Images
Submitting images in a disorganized folder can slow down the design process.
- Create folders like Products, Team, Events, etc.
- Include a short description in the file name (e.g., Jane_Doe_Headshot.jpg)
- Avoid spaces or special characters (use _ or -)
6. Include Usage Notes
If an image is meant for a specific location (like a homepage slider or social media preview), include a quick note.
Example:
Banner_Conference_2026_Landscape.jpg – Homepage hero image
7. Bonus Tip: Shoot Multiple Variations
When possible, take a few versions of the same shot with different angles, lighting, and spacing. This gives flexibility for:
- Cropping
- Text overlays
- Responsive design (images that work on mobile vs desktop)
Summary: What We Need From You
To make your website look its best, here’s what to keep in mind:
| Aspect | What We Need |
| Orientation | Both portrait and landscape versions |
| Quality | High-resolution originals |
| File Type | JPEG for photos, PNG/SVG for graphics |
| Cropping | Extra space around subjects |
| Organization | Labeled folders and descriptive file names |
| Usage Notes | Optional notes for placement or context |
| Variations | Multiple angles, lighting, or composition |
Following these guidelines ensures your images look professional, fit perfectly on your website, and save time during the design process.
Pro Tip for Clients:
Whenever you take new photos for your brand, think “where might I use this image?” A single shot could serve multiple purposes if you have both orientations, high resolution, and some extra space around the subject.
