Asset Management & Image Optimization
Images are typically the heaviest part of a webpage. Pragma CMS features a robust, automated pipeline to guarantee pristine Core Web Vitals (LCP, CLS) without requiring editors to manually compress files.
On-Upload Generation
When an image is uploaded to the Admin panel, the original file is safely kept in /media/source/.
The MediaManager instantly generates multiple responsive variants (thumbnail, medium, large, xlarge) in the background.
Next-Gen Formats (AVIF & WebP)
For every variant, the CMS generates parallel WebP and AVIF files. AVIF offers up to 50% better compression than WebP, drastically reducing bandwidth for mobile users.
The Lanczos Filter
To ensure crisp images without visual artifacts, the CMS utilizes the Lanczos resampling algorithm (via the Imagick extension). This mathematical filter preserves sharp edges and vibrant colors during downscaling, far outperforming standard bilinear resizing.
Frontend Delivery (renderImage)
Developers do not need to manually write complex HTML. Using the renderImage(int $mediaId) helper, the CMS automatically outputs a strictly compliant HTML5 <picture> tag:
<picture>
<source sizes="(max-width: 1024px) 100vw, 1024px" srcset="/media/images/car-1024.avif 1024w, /media/images/car-600.avif 600w" type="image/avif">
<source sizes="(max-width: 1024px) 100vw, 1024px" srcset="/media/images/car-1024.webp 1024w, /media/images/car-600.webp 600w" type="image/webp">
<img src="/media/images/car-1024.jpg" width="1024" height="768" alt="Red Car" loading="lazy" decoding="async">
</picture>loading="lazy": Defers loading until the image is in the viewport.decoding="async": Prevents image decoding from blocking the main JavaScript thread.- Strict Dimensions:
widthandheightattributes are always injected to prevent Cumulative Layout Shift (CLS).