I've been working with Breakpoints, Picture, and Imagecache to do responsive images. What an awesome trio. I had a project where certain images appeared on the normal and wide breakpoints but did not appear on the narrow and mobile breakpoints. My quick workaround at the time was to make an Imagecache style of a 1x1 image for mobile and narrow and used CSS to hide it. This was the best I could think of at the time to increase page speed. It worked, but I know there must be a better solution.

So I thought, what if there was a module or custom action that would take any image and just turn it into a 1x1 transparent data image? Hide the tiny guy with CSS and you have a bit of a better solution than several different 1x1 images, each with an http request.

Am I on the wrong track with this idea or is this workable?

Beginner module developer over here so you could say I'm stuck.

Thanks for any advice.... :)

Comments

dman’s picture

dman commented

Gosh. What an idea.
well - I understand your thought processes. Not entirely crazy.

There is no reason why you can't just scale to 1x1 for that. I guess

If you wanted to set the color, you can do it with "define canvas" and the seldom-useful "color *over*" option.
Transparent, um, no, putting a transparent over would not hide the background.
You could define canvas to add a transparent border of at least i px then crop to 1x1
that would give you a transparent pixel.

But really, you are probably fine just doing the crop to 1x1 and not get tricky.

iwuv’s picture

iwuv commented

Thanks for replying! In my situation, it was actually six images that needed to disappear, so the reason I was thinking a base64 encode of a 1x1 transparent gif is because it would save six http requests. It doesn't really need to be transparent but this code for a transparent 1x1 gif is readily available around the nets so I was thinking to use it.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Another idea, instead of the base64 encode would be a link to a 1x1 gif so it's at least the same file and I'd assume the browser would only fetch it once. Is this sort of thing possible with a custom action? Or a custom module?

dman’s picture

dman commented

If you are concerned about the http requests, than producing transparent shims is the opposite of what you want to do.

the encoded data version of an image is not something that can be done once image processing has reached the imagecache_actions step. What you need to do is supply an altogether different 'rendering' option. Not just what style of image is generated, but what gets rendered
In your case, what you are really asking for it "don't render anything" and that could and should be a rendering option. It should not be a 'style' of image rendering, it should just be a rendering option altogether. And the logic for that lives above the level this module operates at

iwuv’s picture

iwuv commented
Status: Active » Closed (works as designed)

Makes perfect sense. Muchos graciousness, dman!