We are using a png image as our logo on our main site. The image is about 85x57 pixels. Whenever we are viewing the website on Chrome, the image looks smooth. However, on firefox the image is grainy and one can distinguish each pixel. Is this a common browser issue with Chrome? Or is there a quick fix for this?
The "grainy-look" could be the result of a bug in Firefox as mentioned in this post.
Browsers have different methods of interpolating images when NOT rendered at their native size.
Best advice: render the image at its native size.
Related
I'm currently trying to test out this new css rule, which fixes the blurry retina image downscaling in Chrome.
I described the problem in detail here: Blurry downscaled images in the Chrome 84
The rule I applied to my img tags is this: image-rendering: -webkit-optimize-contrast
While it fixes the blurry problem in Chrome, I heard that it can mess up how images look in Safari. I'd really appreciate if someone who uses Safari on a Retina display (laptop) would check if images on this site are displayed correctly (nice and sharp). There should be no ripped/grainy edges or anything like that.
Looks good to me.. Would comment, not enough reputation points.
Images:
I'm converting all the images on my website to interlaced, but i found a possible issue, under OSX 10.10.5 and Firefox 38.0.5
Interlaced PNGs that are bigger than the browser window (and so they are resized in automatic by the browser) display in a very low quality, like if they are displayed in one of the intermediate layers, and not in the final version. Zooming the image to 100% removes the problem, and changing the browser windows size removes the problem as well.
Here is an example of an interlaced image:
https://trac.ffmpeg.org/attachment/ticket/161/Test_24bpp_interlaced_paeth.png
(you have to download it and open with firefox in a small window, so that the image zooms out)
This issue is happening in the 80% of the times I try the same operation.
The issue doesn't appear, instead, in jpeg progressive images.
Could you please confirm me the issue? I think it's very strange that I can't find any other people having my same problem.
I have a website made in Magento, and some of the product images on the product pages are blurry in Firefox and Internet Explorer, but not Chrome or Safari. EDIT: Actually, I just noticed that it does it briefly on Chrome before fixing itself.
Any ideas on why this is happening and how I can fix it?
The URL is: http://centaurrecords.com/store/johannes-brahms-piano-pieces.html
Thanks!
Your zoom module uses full images that are being scaled down by the browser, what does not give the best results. Most modern browsers automatically optimize scaled down images, but some gives a better rendering than others (this is why the image is nicer with Chrome).
I have create a PNG arrow graphic for use in a client's website. It render's perfectly everywhere except in IE 6,7,8 and 9. I have attached an image for you to examine and have already tried 2 different IE png fix scripts - one jquery and one a css behaviour .htc file.
Please assist me.
Thanks
Jamie
Image: http://i51.tinypic.com/2w1uzqe.jpg
Sorry to say that but for 5 years i've been looking for 100% working hack for png transparency bug in IE's with no result. There are many of them and usually each of them doesn't work here and there.
Try using transparent gif instead or crop arrow image with background along. It will take few more bytes of White color so won't damage your performance that much.
The bug that IE PNG Fix scripts are designed to fix is only a problem for IE6 and lower.. hmm.. possibly IE7? I forget. In any case, IE8 fixed the issue, and IE9 definitely shouldn't have it. These IE versions may still have plenty of bugs, but the old well known PNG background issue isn't one of them.
My guess is that there may be a corruption in the PNG file itself.
My suggestion is to try loading the PNG image into Photoshop (or your favourite graphics app), and re-save it. That may be all you need to do to solve the issue.
Failing that, would you be able to give us a link to the actual PNG file, so we can have a look as well?
Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image