MattWilcox / Adaptive-Images

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed.
http://adaptive-images.com/
1.76k stars 229 forks source link

Black Gifs #177

Closed lupin7152 closed 9 years ago

lupin7152 commented 9 years ago

Hi! I'm using adaptive images on Wordpress, and everything is fine with JPG and PNG images. I'm having some problems with GIF images. Some of them are being saved on ai-cache all black. And some of them are being displayed with black background (replacing transparency). Any clue on how to solve this without converting all the images?

britannicker commented 9 years ago

Great stuff, Mr. Wilcox!

I finally got round to adding it to my little (personal) website. It took me (not a programmer) almost 2 hours to get it going but I got there.

The thing is, your "adaptive-images-thang" can't seem to cope with transparent GIFs. So, I'm with lupin on this one.

I don't have any PNGs but can confirm that all is well with JPGs. But any transparency becomes solid black.

Any ideas?

britannicker commented 9 years ago

I take it back... it does indeed work.

What I tried, more out of desperation than anything else, was to go into the "cache" folder on the server and delete all the saved adaptive images. On my phone I deleted the cache and started calling-up the website a new.

And what do you know? It all works. And the GIFs are indeed transparent.

For me, this issue can be closed.

lupin7152 commented 9 years ago

Unfortunatelly I have already tried deleting the cache, but the black GIFs are being created again... So I edited .htacess to transform just the PNGs and JPEGs, as I use all of them. It has already improved my Page Speed Score a lot, but it would be nice if it worked with my transparent GIFs too.

britannicker commented 9 years ago

I had to think about this for a while. As I said, it works for me. So I'm guessing I did something else or something more. Then I remembered: I changed the cache folder (something like "test/ai-cache") thus forcing new images to be generated. Or have you tried a new path? Go back and include GIFs in your htaccess. Then edit the php file to create a whole new cache. Tell us what happens. Even if it sounds pointless to you. That's science! You know, when you can reliably reproduce an effect.

lupin7152 commented 9 years ago

Unfortunately it didn't work... I checked the new files on test folder, and the gifs are all black again. They files are all the same, with about 0.34kb, although the original images are different. Maybe is something related with the way the transparency was saved.

britannicker commented 9 years ago

We need your help, Mr. Wilcox!

Your adaptive-images-thing remains great stuff bar transparent GIFs... which don't work at all. I applied some science! i.e. I reliably reproduced an undesirable effect. I repeated my experiments with a few different GIFs with transparency and different paths/caches and all those things... and I get only black GIFs. Where there should be transparency, there's solid black. Not sure how I missed this before but I got it wrong. Lupin was right the whole time.

Is there any way to change this?

I mean apart from re-editing all my GIFs and saving them as PNGs with transparency.

Would appreciate some help here :-)

britannicker commented 9 years ago

OK, I gave up all hope and bit the bullet. Just spend the last hour exporting/converting all 75 of my transparent GIFs to transparent PNGs.

Problem solved!