In my html page, I include an image as
<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">
I style it from an external css by
img {width:2em;height:2em; }
However I notice that the image quality deteriorates when same image is used more than once in a page.
Compare http://jsfiddle.net/aJ333/50/ and http://jsfiddle.net/zxgQr/ in firefox. The quality of smiley is worse in the first one.
Any insight on why this happens and how to retain the quality ?
P.S. Ive checked this happens even if images are in different div containers.
P.S. This seems to be browser specific:
In chrome both are good quality
In IE9 both are bad quality
In firefox quality of smiley is worse in the first fiddle.
I would like this to work in firefox at least.
Im novice in html so please bear with in case this is obvious
You are setting a height and a width value on your images. If those values are bigger or smaller than the actual dimensions of the picture, the browser must scale it. This process changes the resolution of the picture making it look somewhat blurry.
Related
It looks perfect in chrome and firefox, but the scaling in IE and Edge is terrible. The size is good but the image looks sharper, the actual image is 2 times bigger than the background size. Is there a way to fix it, I've tried several things I found on stackoverflow but nothing seems to work.
The problem is your relying on the browser to resize your images. Browsers have notoriously poor rendering when scaling images. You should use a specific size and pre-format them in a graphic package beforehand.
I would also consider using an SVG for what you are trying to achieve (I assume the scaled down image is so that on different resolutions, things still look good?) I would seriously consider the flexibility it would give you.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.
I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.
The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)
The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.
My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)
Comparison:
Have you tried putting this in your CSS?
img { -ms-interpolation-mode: bicubic; }
There's also this https://github.com/adamdbradley/foresight.js which looks very interesting
Make sure IE9 isn't in compatibility mode or IE7/8 mode...
The reason this happends if because the bitmapdata is actually rendered completely different in the IE browser, the thing IE does is it "cuts" away pixels over a set ratio so like every 5 pixels it yanks a pixel and therefor makes it look like it misses certain gradient properties.
not much you can do about this except for keeping the aspect ratio set but I guess you would've known that by yourself already
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.