Images are the visual backbone of your website. They communicate your brand, break up text, and engage visitors—but only when used correctly. Poor image practices can slow your site to a crawl, hurt your search rankings, and even land you in legal trouble. This guide covers everything you need to know to use website images effectively, legally, and strategically.
1. Image Size and File Optimization
Recommended Dimensions
Different areas of your site require different image sizes:
- Hero/banner images: 1920px × 1080px (full-width headers)
- Blog featured images: 1200px × 630px (optimal for social sharing)
- In-content images: 800px – 1200px wide
- Thumbnails: 300px × 300px or 400px × 300px
- Product images: 1000px × 1000px minimum (allows zoom)
Always consider your layout. If an image displays at 600px wide on your site, uploading a 3000px version wastes bandwidth and slows load times.
File Size Targets
Aim to keep most images under 200KB. Hero images can go up to 500KB if necessary, but anything larger should be questioned. Large files increase page load time, which directly impacts user experience and SEO rankings. Google considers page speed a ranking factor, and users abandon slow sites quickly.
File Formats Explained
JPEG: Best for photographs and complex images with many colors. Offers good compression with acceptable quality loss. Use for most photos.
PNG: Best for website images requiring transparency or images with text, logos, and sharp lines. Larger file sizes than JPEG but no quality loss (lossless compression).
WebP: Modern format offering superior compression (30% smaller than JPEG) with excellent quality. Supported by all major browsers now. Highly recommended when your platform supports it.
SVG: Vector format perfect for logos, icons, and simple illustrations. Infinitely scalable without quality loss and typically tiny file sizes. Not suitable for photographs.
Compression Tools
Before uploading, compress your images:
- TinyPNG/TinyJPG: Free online compression that maintains quality
- ImageOptim: Desktop app for Mac
- Squoosh: Google’s web-based image optimizer
- ShortPixel, Smush, Imagify: WordPress plugins that auto-compress on upload
Many website platforms also offer automatic compression, but uploading pre-optimized images gives you more control.
Responsive Images
Your images should adapt to different screen sizes. Modern websites use responsive image techniques like CSS to scale images proportionally and the srcset attribute to serve different image sizes based on the device. Platforms like WordPress automatically generate multiple sizes when you upload. Always preview your site on mobile devices—an image that looks perfect on a desktop might be illegibly small or awkwardly cropped on a phone.
2. What NOT to Do with Website Images
Don’t upload straight from your camera. Raw photos from modern cameras are 5-10MB or larger. These will cripple your site speed.
Don’t use images without proper rights. A Google Images search doesn’t grant you permission. Copyright infringement can result in expensive cease-and-desist letters or lawsuits ranging from hundreds to thousands of dollars per image.
Don’t forget mobile. An intricate image with tiny text might be unreadable on a phone. Text overlays need sufficient contrast on all devices.
Don’t stretch or distort images. Maintain aspect ratios. A distorted image looks unprofessional and damages credibility.
Don’t ignore load times. If your page takes more than 3 seconds to load, you’re losing visitors. Use tools like Google PageSpeed Insights to test.
Don’t use generic, obvious stock photos. The handshake photo, the diverse team laughing at a laptop—we’ve all seen them. They don’t build trust or authenticity.
Don’t skip optimization thinking “it’s just one image.” Every image adds up. A page with 20 unoptimized images is a disaster.
3. Alt Text: The Non-Negotiable Website Images Essential
What Is Alt Text?
Alt text (alternative text) is a written description of an image added to the HTML code. It appears when an image fails to load and is read aloud by screen readers for visually impaired users.
Why It Matters
Accessibility: Roughly 2.2 billion people worldwide have vision impairment. Screen readers rely on alt text to convey what’s in an image. Skipping alt text excludes these users from your content and may violate accessibility laws like the ADA or WCAG standards.
SEO: Search engines can’t “see” images—they read alt text to understand content. Descriptive alt text helps your images appear in image search results and strengthens page relevance for your target keywords.
User experience: When images don’t load (slow connection, broken link), alt text tells users what they’re missing.
How to Write Effective Alt Text
Be specific and descriptive, but concise (typically under 125 characters):
- Bad: “image123.jpg” or “picture”
- Better: “dog”
- Best: “golden retriever puppy playing with tennis ball in park”
Include relevant context. For a blog about email marketing, an image alt might be “example of welcome email with clear call-to-action button.”
Use keywords naturally when relevant, but never keyword-stuff. “Buy shoes cheap shoes affordable shoes online” is spam and helps no one.
When to Leave Alt Text Empty
Decorative images that add no informational value should have empty alt text (alt=””), not missing alt attributes. This tells screen readers to skip the image. Examples include purely decorative borders or dividers, images used for visual spacing, and icons that duplicate adjacent text (like a magnifying glass next to “Search”). If the image conveys information or meaning, it needs descriptive alt text.
Common Mistakes
- Starting with “image of” or “picture of” (screen readers already announce it’s an image)
- Writing alt text for SEO instead of users
- Copying the caption as alt text (they serve different purposes)
- Leaving alt text completely blank when it should be descriptive
4. Captions: When and Why to Use Them
The Difference Between Alt Text and Captions
Alt text is invisible to sighted users and describes what’s in the image for accessibility and SEO. Captions are visible text below or beside an image that provides context, attribution, or additional information.
When Captions Add Value
Attribution: If you’re using someone else’s photo (with permission), credit them in the caption: “Photo by Jane Smith, used with permission.”
Context: Captions can explain what’s happening in the image, especially for complex visuals. “Our team at the 2024 industry conference in Austin, Texas.”
Storytelling: In blogs and articles, captions can guide the narrative or add humor, emotion, or insight.
Data and charts: Always caption graphs to explain what the data shows.
Before/after images: Captions clarify which is which and what changed.
When They’re Unnecessary
Not every image needs a caption. Skip captions when the image is self-explanatory in context, it’s a decorative element, the surrounding text already describes it, or you’re using hero/banner images. Overusing captions clutters your design and can feel redundant. Use them purposefully.
5. Stock Images: Permissions and Copyright
Understanding Image Licenses
Royalty-Free: You pay once (or download for free) and can use the image multiple times without additional fees. This doesn’t mean “free”—you still need a license.
Rights-Managed: You pay based on specific usage (where, how long, exclusivity). More expensive but offers exclusivity options.
Creative Commons: Free licenses with varying restrictions:
- CC0: Public domain, use freely
- CC BY: Free with attribution required
- CC BY-SA: Free with attribution, derivative works must share the same license
- CC BY-ND: Free with attribution, no modifications allowed
- CC BY-NC: Free with attribution, non-commercial use only
Always check which Creative Commons license applies and follow its requirements.
Editorial Use Only: Can be used for news, blogs, and commentary but NOT for commercial purposes like advertising or product promotion.
Reputable Stock Photo Sources
Paid: Adobe Stock, Shutterstock, iStock, Getty Images, Stocksy (curated, artistic)
Free: Unsplash (high-quality, CC0), Pexels (CC0), Pixabay (CC0), Burst by Shopify (CC0, commerce-focused)
Even on free sites, check the specific license for each image. Terms can change.
What You Can and Cannot Do
Generally allowed with royalty-free licenses: Use on websites, blogs, social media; modify and edit the image; use in client projects.
Generally NOT allowed: Reselling the image as-is or in templates; using in logos or trademarks (can’t be your primary brand identifier); implying endorsement by people in the photos; redistribution as stock photos.
For models/people in photos: Commercial use often requires a model release. Stock sites handle this, but if you’re photographing people yourself, get written permission.
The Risks of Using Unlicensed Images
Copyright holders can issue DMCA takedown notices, demand licensing fees retroactively, or sue for statutory damages up to $150,000 per image for willful infringement. Getty Images is particularly aggressive about tracking unauthorized use. It’s not worth the risk.
Reverse Image Search
Before using an image you found online, do a reverse image search (Google Images, TinEye) to verify its source and check for copyright information. This helps you avoid using someone’s copyrighted work unintentionally.
6. Protecting Your Original Images
Copyright Basics
The moment you take a photo, you own the copyright (in most countries). You don’t need to register it, though registration provides additional legal protections in the U.S. if you need to sue for infringement. Copyright gives you exclusive rights to reproduce, distribute, display, and create derivative works. Others cannot use your images without permission.
Watermarking
Pros: Deters casual theft, provides attribution if images are shared, shows professionalism.
Cons: Can detract from image aesthetics, easy to crop out or Photoshop away for determined thieves, may discourage legitimate sharing.
If you watermark, place it strategically where it’s hard to remove without destroying the image’s value. Use semi-transparent watermarks to minimize visual disruption.
Metadata and EXIF Data
Cameras embed metadata in images (EXIF data) including copyright info, camera settings, and sometimes location. Add your copyright information to your camera settings or in photo editing software. However, metadata is easily stripped, so don’t rely on it as your only protection.
Disabling Right-Click
Some websites disable right-clicking to prevent image downloads. This provides minimal protection—users can view page source, take screenshots, or use browser extensions to download anyway. It’s more likely to annoy legitimate users than stop theft.
Legal Recourse
If someone uses your images without permission:
- Document the infringement (screenshots, URLs, dates)
- Send a cease-and-desist letter requesting removal and compensation
- Issue a DMCA takedown notice to their web host
- Consult an intellectual property attorney for serious cases
When to Register Copyright
In the U.S., registering your copyright with the U.S. Copyright Office (before infringement or within 3 months of publication) allows you to claim statutory damages and attorney’s fees in lawsuits. Registration costs $35-65 per work. Consider it for your most valuable images or if your livelihood depends on photography.
7. Featured Images and SEO
What Are Featured Images?
Featured images (also called hero images or header images) are the primary visual for a page or blog post. They appear at the top of the article and represent the content when shared on social media or listed in blog archives.
Social Sharing and Open Graph
When you share a link on Facebook, Twitter, LinkedIn, or Slack, these platforms pull your featured image using Open Graph (OG) tags in your HTML. This makes your content more clickable and engaging.
Optimal dimensions for social platforms:
- Facebook: 1200px × 630px
- Twitter: 1200px × 675px
- LinkedIn: 1200px × 627px
- Pinterest: 1000px × 1500px (vertical)
The 1200px × 630px dimension works well across most platforms. Many website builders automatically set OG tags from your featured image.
Image File Naming for SEO
Search engines read file names. Use descriptive, keyword-rich names:
- Bad: IMG_7392.jpg, screenshot.png
- Good: chocolate-chip-cookie-recipe.jpg, small-business-marketing-tips.png
Use hyphens (not underscores) to separate words. Keep names concise and relevant to the image content and page topic.
Image Sitemaps
An image sitemap helps search engines discover and index your images. Many SEO plugins (like Yoast or Rank Math for WordPress) automatically include images in your XML sitemap. Submit your sitemap to Google Search Console to help your images appear in image search results.
Structured Data for Images
Structured data (schema markup) provides search engines with additional context. For example, recipe schema can make your food images appear in rich results with star ratings. Product schema can show your product images in Google Shopping results. Implementing structured data is more technical but can significantly boost visibility.
8. Additional Best Practices
Lazy Loading
Lazy loading delays loading images until users scroll near them. This dramatically improves initial page load time, especially for image-heavy pages. Most modern platforms and CMSs support lazy loading natively or through plugins.
CDN Usage
A Content Delivery Network (CDN) stores copies of your images on servers worldwide, delivering them from the location closest to each visitor. This reduces load time globally. Services like Cloudflare, Amazon CloudFront, and specialized image CDNs (Cloudinary, imgix) offer this functionality.
Consistent Visual Style
Your images should feel cohesive. Consistent color grading, filters, composition style, and subject matter create a professional brand identity. If you use stock photos, choose from the same collection or photographer when possible.
Accessibility: Contrast and Text Overlays
When placing text over images, ensure sufficient contrast for readability. Use semi-transparent overlays, shadows, or outlines to make text stand out. Test your site in grayscale to ensure contrast works for colorblind users. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text.
Image Security Considerations
If your site handles sensitive images (e.g., user-uploaded content), implement file type validation (only allow safe formats), malware scanning on uploads, proper file permissions on your server, and HTTPS to encrypt image transmission. Never trust user uploads blindly—malicious users can upload executable files disguised as images.
Regular Image Audits
Periodically review your website images: remove unused images to save server space, update outdated screenshots or photos, fix broken image links, re-optimize old images with newer compression tools, and check that all images still have proper alt text. Tools like Screaming Frog can crawl your site and identify missing alt text, broken images, or oversized files.
Conclusion
Website images are powerful tools for communication, engagement, and SEO—but only when handled properly. Optimize your file sizes for fast loading, write descriptive alt text for accessibility and search engines, respect copyright laws to avoid legal issues, and strategically use featured images to enhance social sharing.
The upfront effort pays off in better user experience, higher search rankings, and a more professional online presence. Start with your homepage and most-visited pages, then systematically improve images across your site. Test your page speed before and after optimization to see the real-world impact.
Key Takeaways:
- Compress images to under 200KB when possible
- Always add descriptive alt text (except for decorative images)
- Only use images you have rights to use
- Optimize featured images for social sharing at 1200px × 630px
- Use descriptive file names for SEO
- Implement lazy loading for better performance
- Maintain visual consistency across your site
Treat images as a critical component of your website strategy, not an afterthought, and you’ll see the benefits in traffic, engagement, and conversions.
Additional Resources
- Google PageSpeed Insights: Test your site speed and get optimization recommendations
- WebAIM Contrast Checker: Verify text-over-image contrast meets accessibility standards
- TinEye / Google Reverse Image Search: Verify image sources and check for unauthorized use of your images
- WCAG Guidelines: Official web accessibility standards, including image requirements
- Creative Commons License Chooser: Understand different CC licenses when using free images
Need Help Optimizing Your Website Images?
Getting your website images right requires technical know-how, design sensibility, and attention to detail—and it’s just one piece of building a high-performing website. At Central Lakes Digital, we specialize in creating and optimizing websites that look stunning, load quickly, and rank well in search engines.
Whether you’re building a new site from scratch or need to update your existing website with proper image optimization, accessibility improvements, and SEO best practices, we’re here to help. We handle everything from file compression and alt text to responsive design and performance optimization, so you can focus on running your business.
Ready to make your website work harder for you? We’d love to talk about your project. Contact us today to discuss how we can help you create a website that’s fast, accessible, and designed to convert visitors into customers.
