[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Firefox/Chrome Image Resize Bad Quality

Posted on 2011-05-04
Medium Priority
Last Modified: 2012-05-11
Check out this site in Firefox:

Why is the quality of those images so bad? I know I'm scaling them down quite a bit, but IE seems to handle it alright.  Chrome handles them alright, but if you zoom in/out of the page the images will pixilate.  Is there a css trick I need to do in order to maintain quality on a scaled image?
Question by:thedeal56
  • 4
  • 3
LVL 13

Accepted Solution

jonahzona earned 2000 total points
ID: 35693386
I tested in IE8, FF, Chrome and Safari. All look the same: really pixelated.

Your images are really big and asking your browser to resize them (along with all that goes into pixel reorientation when changing sizes) is a little unrealistic.

I would HIGHLY recommend resizing the images yourself and using the resized images.

Alternatively, you could use javascript to do it more accurately.


Author Comment

ID: 35693443
That's kind of weird that IE is showing pixelated for you.  They look fine on my end.  I tried some resizing, but it looks bad in FF.  I know that some users have a default page zoom set, so I was hoping to scale down a higher quality image, so that it wouldn't show up as a blur when zoomed in. I'll take a look at that javascript
LVL 13

Expert Comment

ID: 35693469
May ask I why you are trying to resize them? Why do you need such large copies available?

Here is the screenshot of my IE.

 Screenshot fro IE8
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 35693484
There's really no reason to have them that big.  I will resize the ones on that page, and see if it clears it up. I'll post back in a sec.

Author Comment

ID: 35693534
I just resized them.  If you don't mind, will you check it out again?
LVL 13

Expert Comment

ID: 35693623
So much better!

Graphics programs are intended to recalculate and compress pixels while attempting to not lose quality. Your browser is not.

Looks great. New Screenshot from FF

Author Comment

ID: 35693642
Good deal.  they look much more clear on the sample site I made, but on my actual test site(one which I didn't not link to) they are still messed up.  It may be a cache problem.  Thanks a lot for your help.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month19 days, 7 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question