SEO & Accessibility
AI
Localization
Ecommerce
Forms
Fields
Development
Security
Templating
Performance
Control Panel
Widgets
Assets
Utilities
Mailer Adapters
Social Networking
Integrations
Elevate your site's performance and accessibility with modern, responsive image handling. Picture Tag is a powerful, lightweight Craft CMS plugin designed specifically for Craft 5+, delivering advanced responsive images with full support for next-generation formats like WebP and AVIF. It generates optimized elements, responsive tags, and handles SVGs intelligently—all while prioritizing speed, accessibility, and developer convenience. Built with zero frontend bloat (no JavaScript or CSS files by default), Picture Tag focuses on native browser features for lazy loading, graceful fallbacks, and efficient delivery. Whether you're building a high-traffic site, a portfolio, or an e-commerce platform, this plugin ensures your images load faster, use less bandwidth, and look stunning on every device.
Key Features
Modern Image Formats: Automatic generation of WebP and AVIF variants with configurable quality settings for superior compression and faster load times. Native Lazy Loading: Built-in loading="lazy" attribute with a tiny 1x1 SVG placeholder to defer offscreen images without any JavaScript. Responsive Srcset & Sizes: Smart srcset generation using density descriptors (1x, 1.5x, 2x, 3x) and customizable sizes attributes for perfect responsive behavior. SVG Optimization & Inline Rendering: Minify SVGs, strip unnecessary comments, and easily inline them or render as tags with a single option toggle. Full Transform Caching: Efficient caching system with configurable duration and automatic invalidation to reduce server load. Powerful Twig Functions: sfs_picture(): Outputs a complete element with sources and fallbacks. sfs_img(): Simple responsive with srcset. sfs_svg(): Dedicated SVG handler with inline control. sfs_srcset(): Manually generate srcset strings.
Accessibility-First: Enforces alt text, supports ARIA attributes, screen readers, keyboard navigation, and reduced motion preferences. Developer Tools: Debug mode for inspecting transforms, dimensions, and format support; easy configuration via Control Panel settings or a config/picture-tag.php file. Performance Optimizations: Graceful fallbacks for older browsers (JPEG/PNG), no external dependencies, and support for fetchpriority and preload hints.
Why Choose Picture Tag? In today's web, images often account for the majority of page weight. Traditional image tags fall short with modern needs like format negotiation and efficient lazy loading. Picture Tag bridges this gap by leveraging the native element and browser capabilities, inspired by proven solutions like Marion Newlevant's Picture plugin and Club Studio's Inline SVG—while adding AVIF support, enhanced caching, and a cleaner, more configurable experience tailored for Craft CMS 5. Unlike heavier alternatives, Picture Tag keeps things minimal and performant, making it ideal for developers who want fine-grained control without overhead.
Requirements
Craft CMS 5.0+ PHP (compatible with Craft 5)
Support & Contributions Open-source under the MIT License. Report issues, suggest features, or contribute on GitHub: https://github.com/taher-k5/picture-tag Picture Tag is developed by SFS Infotech—bringing modern image best practices to your Craft projects effortlessly. Load faster, rank higher, and deliver better user experiences today!
To install this plugin, copy the command above to your terminal.
This plugin doesn't have any reviews.