Image Sizing Examples
This post demonstrates the new image sizing capabilities in the blog.
Small Image (300px max)
Small images are perfect for icons, thumbnails, or decorative elements.
Medium Image (500px max)
Medium images work well for product photos, screenshots, or diagrams.
Large Image (700px max)
Large images are ideal for hero images, featured photos, or detailed visuals.
Full Width Image
Full-width images span the entire content area, great for banners or panoramas.
Image with Caption
Left-Aligned Image with Text Wrap
When you use the img-left class, text flows naturally around the image on the right side. This is perfect for blog posts where you want to integrate images seamlessly with your content. The image will float to the left, and paragraphs will wrap around it, creating a magazine-style layout that's both elegant and space-efficient.
You can continue writing multiple paragraphs, and they will all flow around the image until the image height is exceeded. This creates a very professional and polished look for your blog posts.
Right-Aligned Image with Text Wrap
Similarly, the img-right class makes the image float to the right side, with text wrapping on the left. This is great for alternating image positions in your content, creating visual variety and keeping readers engaged.
The responsive design ensures that on mobile devices, these images will stack naturally without awkward text wrapping, maintaining readability across all screen sizes.
Centered Image
Centered images are perfect when you want to draw attention to a specific visual element. They create a clear break in the content and ensure the image is the focal point.
Best Practices
- Always include descriptive alt text for accessibility
- Choose the appropriate size for your content
- Use captions to provide context
- Optimize images before uploading (compress and resize)
- Use HTTPS URLs for security
Conclusion
With these new image sizing capabilities, you have complete control over how images appear in your blog posts. Whether you need small thumbnails, large hero images, or text-wrapped illustrations, the blog now supports all these use cases with simple HTML attributes and CSS classes.