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.
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?
- <img src="<perch:content id="cov_img" type="image" width="500"/>"
- srcset="
- <perch:content id="cov_img" type="image" width="500"/> 500w,
- <perch:content id="cov_img" type="image" width="1000"/> 1000w,
- <perch:content id="cov_img" type="image" width="2000"/> 2000w,
- "
- sizes="(min-width:1000px) 25vw, (max-width:1000px AND min-width:500px) 50vw, (max-width:500px) 100vw"
- <perch:if id="lang" value="en">
- alt="<perch:content id="en_cov_img_alt" type="text"/>">
- <perch:else>
- alt="<perch:content id="fr_cov_img_alt" type="text"/>">
- </perch:if>