Issue with gif and png in srcset

    Hi!

    First of all I would like to say that I find this CMS great and that you've done an amazing job with it. :thumbup:


    I'm creating a responsive website and wish to serve multiple image sizes in a srcset. The user only upload one picture (2000px wide) and I let perch create 3 versions (500px, 1000px, 2000px) of it.

    Everything works fine except that smaller versions of gif don't play anymore. But if I resize the browser window and that the browser loads the 2000px version, this version plays fine. [This issue is on Firefox, chrome and safari]


    I have a similar issue with png images with a white background. The larger version is fine, but smaller version show light gray horizontal lines all across the images. [This issue doesn't append on safari but on chrome and Firefox]



    The screenshot make the lignes very difficulte to see but they do exist on the first image.



    Am I doing something wrong here? :/

  • drewm

    Approved the thread.

    The standard php GD image library is pretty pants. It adds all sorts of artefacts to images. Try installing (or getting your host to install) imagemagick. It does a much better job of compression on pngs and gifs. You can then turn this on in Perch config using PERCH_IMAGE_LIB.


    If that's not possible then try using sharpen="0" in the image field. Or, finally, you can add separate (different ids) img fields for 500 and 1000 that don't do any resizing on the original image.

    Thank you both for your answers.


    I'm new at all those php image resizing and I've tried the following :


    A) According to Perch diagnostics the server has both GD and ImageMagick :


    B) So I set the following in perch config.php

    Code
    1. define('PERCH_IMAGE_LIB', true);

    Is that right?


    c)I have now the following issues:

    - When I upload a new image perch doesn't generate a preview and the load button become empty after I saved the change (even if the picture is added and displayed on the website).



    - The second issue I have is that it seems perch doesn't make multiple version of this image. The images uploaded before were renamed something like xxx-w500.png, xxx-w1000.png, xxx-w2000.png and used accordingly. Now I just have a xxx-1.png which stays the same independently of the browser width.

    I've probably missed something.


    Quote from Byron Fitzgerald

    You won't be able to supply multiple image sizes of the gif using Perch's resizing features. As when resizing the Gif it will effectively just save a poster of it, hence why the 2000px still works whilst the others, don't.

    As gif are only a small percentage of the assets, it is possible to manage them differently and prepare different sizes before the upload... even if I would have preferred an automatic solution.


    Do you guys have an idea?

    If you are not opposed to using a third-party service, you can use the Cloudinary template filter. Cloudinary supports resizing animated GIFs.


    Quote from ellimondo

    Hi, it's define('PERCH_IMAGE_LIB', 'imagick'); to turn on Imagemagick.h

    Thank you! I was suspecting that it would be something like this, but I misunderstood the doc.

    It’s working perfectly fine with the png.


    Unfortunately, gif resizing is worst than before. Do you know if there is something we can do about it using imagemagick? Otherwise I will explore the other propositions of third-party or multiple file upload.