Last updated
Common Placeholder Sizes Reference
- Favicon: 16x16, 32x32, 48x48
- Open Graph / Social share: 1200x630
- Twitter card: 1200x600
- YouTube thumbnail: 1280x720
- Hero banner: 1920x600 or 1920x1080
- Blog post featured image: 1200x800
- Product thumbnail: 400x400 or 600x600
- Standard banner ad: 300x250, 728x90, 160x600
- Profile/avatar: 200x200 or 400x400
Examples
Example 1: Basic Placeholder via URL
Reference placeholder images directly in your HTML without downloading files:
<!-- 300x200 gray placeholder -->
<img src="https://techconverter.me/placeholder/300x200" alt="Placeholder" />
<!-- 1920x1080 hero image placeholder -->
<img src="https://techconverter.me/placeholder/1920x1080" alt="Hero placeholder" />
<!-- 16x16 favicon placeholder -->
<img src="https://techconverter.me/placeholder/16x16" alt="Favicon placeholder" />
The default placeholder shows the dimensions as text (e.g., "300 × 200") on a gray background, making it easy to verify the correct size is being used in your layout.
Example 2: Custom Colors
<!-- Blue background with white text -->
<img src="https://techconverter.me/placeholder/400x300/0077BB/FFFFFF" alt="Blue placeholder" />
<!-- Match your brand colors -->
<img src="https://techconverter.me/placeholder/800x400/1A1A2E/E94560" alt="Brand placeholder" />
<!-- Light background for content areas -->
<img src="https://techconverter.me/placeholder/600x400/F5F5F5/999999" alt="Light placeholder" />
Custom colors help create more realistic mockups that match your design's color scheme, giving stakeholders a better sense of the final layout.
Example 3: Custom Text Labels
<!-- Describe the intended content -->
<img src="https://techconverter.me/placeholder/400x300?text=Product+Photo" alt="Product photo placeholder" />
<!-- Label by section -->
<img src="https://techconverter.me/placeholder/1200x400?text=Hero+Banner" alt="Hero banner placeholder" />
<!-- Team member photos -->
<img src="https://techconverter.me/placeholder/200x200?text=Team+Member" alt="Team member placeholder" />
Custom text labels communicate design intent to developers and clients reviewing mockups, making it clear what type of content each placeholder represents.