On my site I have several hundred images in jpg format, with a white background area (in the image itself). This has worked fine as the html/body background was also white. Images appeared to be transparent that way.
Now, I am about to change the site theme and these same images will now have a light grey html/body background color. I have tried to use the css rule mix-blend-mode: multiply; to make the white areas in the images transparent. This works fine in Chrome and Firefox, but not in Internet Explorer (11).
Any suggestions on how to work around this? Just to be clear, it's not the image overall opacity I want to fix, it's only the white area in the jpg images that I want to make transparent.
If no solution is possible I will have to change the format to png or gif with transparency. That would take days to accomplish...
Related
I am making a game sorta like cookie clicker, and I want the images to look 8 bit. I use a macbook pro retina, which has four pixels for every one pixel on a normal screen. On Chrome and Safari, instead of each pixel being represented by 2x2 pixels, I get a bunch of blurry blobs... I don't have this problem on FireFox. There's this one website called pixeljoint.com that is made for pixel art, and I don't have the blurry problem there. Whenever I open one of the images from PixelJoint in a new tab, the image goes back to blurry. I heard that the problem is that the images are scaled before they are displayed on chrome and safari, but I'm not too sure.
Here are two screenshots to show what I'm talking about:
I would also like to point out that the images are normal .gif files.
I am aware that you can convert a gif file to an svg with this link
and an svg file looks fine on retina.
All I want to know is how PixelJoint makes the pixels look so smooth.
I figured it out, you need to use CSS!
<style>
img {image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: optimize-contrast;image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
</style>
I found this in the source code, so I guess this is how PixelJoint does it.
I created an extension for Firefox and made a simple icon for it.
But when I tested it in the Addon manager the icon appeared blurry despite my source image was fine.
I started to experiment with different sizes and shapes of the icon.
Figured out that the icon container is 48x48 pixels and the default addon icon is 32x32.
But for any experiments the result was the same.
So I created a simple rectangle icon drawing it by pixels so it shouldn't blur anyway:
But the result blurred again:
There is some sub-pixels around the rectangle though the border should be crisp...
In pixels view:
Also I found the default extension icon (a puzzle piece) and in pixels it looks perfect but in the manager the borders are blurred a little though it's not obvious at first glance.
Are you sure this is not happening when you save the image? I don't know what app you are using, but many photo apps try to compress jpm images when you save them by default. Check this first.
Usually this does not happen with png images, so you could try using a png image instead as well.
It was silly enough... The broblem was the page scale not 100% on the Addons page. Pressed Ctrl+0 and all restored.
It happens sometimes on other web pages when I zoom in/out the view and images lose their sharpness.
I have .gif images which are 96*96 and they have transparency. They are not animated.
All I want to do is showing these images on a page with 32*32 sizes. I simply do:
<img src="{path}" width="32" height="32"/>
In Chrome it looks good, in Firefox not bad, in Internet Explorer terrible.
Internet explorer totally ruins the quality of the image.
My question is if there is a way of dealing with this problem? Any css tips?
All I have got from my search is -ms-interpolation-mode: bicubic; but it didn't work.
If you do not have any CSS solutions, can you give me an example of resizing a .gif image which has transparency to size 32*32. When I try it, I either lose transparency or ruinning the quality and all the examples about resizing images via GD is about .png or .jpg files. I have .gif files and they have transparency.
We have a sprite of many icons which is 10564px x 80px. The icons are arranged horizontally.
In every other browser except IE10 the icons/images show up when being used as background images for tags with specific CSS to apply the relevant position.
When viewed in IE10 they do not show up at all and actually when you try to view the png file directly from the URL in IE10 it doesn't show either.
Any ideas?
After extensive testing, it turns out it's a limitation on the width of the PNG canvas and IE10.
PNG images would work and can be viewed right up until 8000px wide but no more than that, after that they just don't render.
After more testing it's related to whether or not they are transparent. PNGs with transparency just don't show at all whereas images without transparency show as a black block (canvas).
Whether or not MS will fix this remains to be seen... we live in hope!
The fix for us is to reduce the width of our sprite to 8000px and have two or more rows of icons/images well spaced out.
The fixes is only to separate the each individual image as single with minimum size, which will be less than 8000px wide;
So I have an image (GIF) with a blueish background and a circle (which i want to keep), I would like to remove the blueish background and ( or show the origin color of the back ground it sites on or make the background of the image totally transparent. )
Thank you .
This is GWT 1.6
GIF supports transparency also, open it in a image editor(not paint, it sucks) and select the background using the magic wand tool. Press delete and you're done!
PS: save it as GIF file if you have to..
This has nothing to do with GWT. The solution is to use PNG image format. PNGs allow you to specify a transparent background.