Optimize images on fly, generate webp, resize, etc.



Optimized Image

  • Show <picture> block with srcset and lazy-load params.
  • Format to webp and resize image on server.

How to use

Add to .env APP_KEY_128 variable with some long key.

Required lazy load js plugin. https://github.com/verlok/vanilla-lazyload works great. Setup it to use .lazy class.

In your blade template:

{!! \Dzorogh\OptimizedImage\Picture::generate('/image/path/inside/storage/app/public/folder.jpg', [
    'width' => 1200,
    'height' => 600,
    'type' => 'jpg',
    'img_classes' => 'img-fluid rounded',
    'picture_classes' => 'my-5',
    'name' => "Fake File Name"])

The picture method returns HTML. It has <picture> tag with 2 sources: one for png/jpg type of image, and second with webp. And also default tag with width and height.

You must store your images in /storage/app/public folder. This package also creates /storage/app/cache for cached resized variants