1

I'm struggling to generate webp images on my forge server. Here is my process in Craft 3.

  1. ssh in to the server (forge)
  2. Install wepb sudo apt-get install webp
  3. Check it is installed and getting piacked up by image Optimize.

enter image description here

  1. In the Craft Admin go to Utilities -> Clear Caches and tick all of the Asset related caches, click on Clear Caches and then to force it to resave all of the images.
  2. Go back to terminal and run ./craft image-optimize/optimize/create images - (I have also tried saving the volume in the admin settings(.
  3. Wait for the image processing to finish (takes a good 10 mins as there is only 50 or so images at variouse sizes)
  4. Then I check my image folder to see if the webp variant has been created. There is no webp alternatives.

enter image description here

  1. Log files that get generated are:
    • console.log
    • queue.log
    • web.log

Download Log files

I'm not seeing any errors in the log files.

  1. Checking the image-optimize.php config file - everything looks in order.

    return [
    //  What transform method should be used for image transforms?
    'transformMethod' => 'craft',
    // Domain for the Imgix transform service
    'imgixDomain' => '',
    // API key for the Imgix transform service
    'imgixApiKey' => '',
    // The optional security token used to sign image URLs from Imgix
    'imgixSecurityToken' => '',
    // Should the image variants in an Asset Volume be automatically re-saved when saving
    // an OptimizedImages field, saving an Asset Volume that has an OptimizedImages field
    // in its layout, or saving the ImageOptimized settings. Set this to false only if
    // you will be manually using the CLI console command to resave image variants
    'automaticallyResaveImageVariants' => true,
    // Should image variant be created on Asset save (aka BeforePageLoad)
    'generateTransformsBeforePageLoad' => true,
    // Set to false to disable all placeholder generation
    'generatePlaceholders' => true,
    // Controls whether a dominant color palette should be created for image variants
    // It takes a bit of time, so if you never plan to use it, you can turn it off
    'createColorPalette' => true,
     // Controls whether SVG placeholder silhouettes should be created for image variants
     // It takes a bit of time, so if you never plan to use them, you can turn it off
    'createPlaceholderSilhouettes' => true,
    // Controls whether retina images are automatically created with reduced quality
    // as per https://www.netvlies.nl/tips-updates/design-interactie/design-interactie/retina-revolution/
    'lowerQualityRetinaImageVariants' => true,
    // Controls whether Optimized Image Variants are created that would be up-scaled
    // to be larger than the original source image
    'allowUpScaledImageVariants' => false,
    // Controls whether images scaled down >= 50% should be automatically sharpened
    'autoSharpenScaledImages' => true,
    // Default aspect ratios
    'defaultAspectRatios' => [
        ['x' => 16, 'y' => 9],
        ['x' => 8, 'y' => 5],
        ['x' => 4, 'y' => 3],
        ['x' => 5, 'y' => 4],
        ['x' => 1, 'y' => 1],
        ['x' => 9, 'y' => 16],
        ['x' => 5, 'y' => 8],
        ['x' => 3, 'y' => 4],
        ['x' => 4, 'y' => 5],
    ],
    // Default image variants
    'defaultVariants'            => [
        [
            'width'          => 1920,
            'useAspectRatio' => true,
            'aspectRatioX'   => 16.0,
            'aspectRatioY'   => 9.0,
            'retinaSizes'    => ['1'],
            'quality'        => 82,
            'format'         => 'jpg',
        ],
        [
            'width'          => 1120,
            'useAspectRatio' => true,
            'aspectRatioX'   => 16.0,
            'aspectRatioY'   => 9.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 82,
            'format'         => 'jpg',
        ],
        [
            'width'          => 800,
            'useAspectRatio' => true,
            'aspectRatioX'   => 16.0,
            'aspectRatioY'   => 9.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 82,
            'format'         => 'jpg',
        ],
        [
            'width'          => 480,
            'useAspectRatio' => true,
            'aspectRatioX'   => 16.0,
            'aspectRatioY'   => 9.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 60,
            'format'         => 'jpg',
        ],
        [
            'width'          => 300,
            'useAspectRatio' => true,
            'aspectRatioX'   => 1.0,
            'aspectRatioY'   => 1.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 60,
            'format'         => 'jpg',
        ],
        [
            'width'          => 200,
            'useAspectRatio' => true,
            'aspectRatioX'   => 1.0,
            'aspectRatioY'   => 1.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 60,
            'format'         => 'jpg',
        ],
        [
            'width'          => 100,
            'useAspectRatio' => true,
            'aspectRatioX'   => 1.0,
            'aspectRatioY'   => 1.0,
            'retinaSizes'    => ['1', '2'],
            'quality'        => 60,
            'format'         => 'jpg',
        ],
    ],
    // Active image processors
    'activeImageProcessors'      => [
        'jpg' => [
            'jpegoptim',
        ],
        'png' => [
            'optipng',
        ],
        'svg' => [
            'svgo',
        ],
        'gif' => [
            'gifsicle',
        ],
    ],
    // Active image variant creators
    'activeImageVariantCreators' => [
        'jpg' => [
            'cwebp',
        ],
        'png' => [
            'cwebp',
        ],
        'gif' => [
            'cwebp',
        ],
    ],
    // Preset image processors
    'imageProcessors'            => [
        // jpeg optimizers
        'jpegoptim' => [
            'commandPath'           => '/usr/bin/jpegoptim',
            'commandOptions'        => '-s',
            'commandOutputFileFlag' => '',
        ],
        'mozjpeg'   => [
            'commandPath'           => '/usr/bin/mozjpeg',
            'commandOptions'        => '-optimize -copy none',
            'commandOutputFileFlag' => '-outfile',
        ],
        'jpegtran'  => [
            'commandPath'           => '/usr/bin/jpegtran',
            'commandOptions'        => '-optimize -copy none',
            'commandOutputFileFlag' => '',
        ],
        // png optimizers
        'optipng'   => [
            'commandPath'           => '/usr/bin/optipng',
            'commandOptions'        => '-o3 -strip all',
            'commandOutputFileFlag' => '',
        ],
        'pngcrush'  => [
            'commandPath'           => '/usr/bin/pngcrush',
            'commandOptions'        => '-brute -ow',
            'commandOutputFileFlag' => '',
        ],
        'pngquant'  => [
            'commandPath'           => '/usr/bin/pngquant',
            'commandOptions'        => '--strip--skip -if-larger',
            'commandOutputFileFlag' => '',
        ],
        // svg optimizers
        'svgo'      => [
            'commandPath'           => '/usr/bin/svgo',
            'commandOptions'        => '',
            'commandOutputFileFlag' => '',
        ],
        // gif optimizers
        'gifsicle'  => [
            'commandPath'           => '/usr/bin/gifsicle',
            'commandOptions'        => '-O3 -k 256',
            'commandOutputFileFlag' => '',
        ],
    ],
    'imageVariantCreators' => [
        // webp variant creator
        'cwebp' => [
            'commandPath'           => '/usr/bin/cwebp',
            'commandOptions'        => '',
            'commandOutputFileFlag' => '-o',
            'commandQualityFlag'    => '-q',
            'imageVariantExtension' => 'webp',
        ],
    ],
    

    ];

I'm stumped! What else do I need to check?

  • 1. Is your setup craft cms v3+ or v2+? (Please add this to your reply) 2. path will be craft/app/storage/runtime/logs in v2 and app/storage/runtime/logs in v3. 3. clear the craft cache 4. clear out all files present in the log folder (see step 2) 5. run the image optimiazation/creation command 6. if possible either upload and link your now present log files in your reply or say which files have been generated (name.log) This should help in identifying wherein the problem lies, thanks! – Campiotti Dec 4 '19 at 12:27
  • Updated. I'm using Craft 3.3.17 – Dan Lee Dec 4 '19 at 14:01
  • Hmm ok I havent' found anything as of yet, one more thing though, can you copy-paste (or upload) your craft/config/image-optimize.php file, if you don't have one then it should be using the default settings. ----------------------------------------------------------------- One more thing: Could you also verify that you get the "same" output when edit an image asset as seen here and try to open a webp variant in a new tab (according to github issues, there can also be issues in that area) – Campiotti Dec 4 '19 at 14:17
  • Two (hopfully) last things: 1. Do you have devMode turned on, if not, please do so and re-create webp images so it'll display debug output either in console or/and in logs. 2. nystudio107.com/docs/image-optimize/Using.html Have you tried the different methods mentioned herein to generate webp files not directly through the CLI? – Campiotti Dec 4 '19 at 14:29
  • Updated the question. devMode was on when images were generated. I have used the admin and command line to generate the images according to the documentation. – Dan Lee Dec 4 '19 at 14:46
1

Based on our discussion in the comments I'm very certain that the problem lies within the settings of the fields in your assets.

In your Optimized Image Variants have you set the Image Format wrongly? enter image description here

If it's not that, then I'm still leaning towards some field/setting rather than the plugin acting wrongly as there were no errors/warnings logged containing webp in your logs.

| improve this answer | |
1

Image Optimize hooks into regular old Craft transforms to do its thing. This means that any time an image transform is created, it'll piggyback on that to create any variants such as the .webp versions.

The thing is, Craft looks to see if the image transform is already on disk, and if so, skips the process of re-creating it. So if you enable .webp (or other image variants) after the regular transforms have already been created on disk, Craft will never throw the event to notify Image Optimize that the .webp variants should be made.

So what you can do is delete the image transform directories from the disk (they are all prefaced with an underscore _), clear the Asset Transform cache, and then re-save the volume (or use the built-in Image Optimized CLI command for generating the images).

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.