SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy images resized by browser look pixelated

    from time to time, there is a really nicely design graphic file or a nice looking photo, but when it is resized on IE or Firefox, the browsers, trying to save time, will make a coarse resize shrinking of the original image... and it looks pretty bad. is there a way to tell the browser by HTML / CSS / browser settings, to take more time to refine it?

    especially, when the page is loaded and the 2GHz Core 2 Duo is sitting there doing close to nothing... why not spend 1/1000 second to make it look better?


  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's just the way modern browsers render images

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You should always display images in web pages at 100% of their actual size. If the image needs resizing then use your graphics software to resize it before you upload it to the web.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Browsers don't resize the image it is still the same size when it got it. All it does is constrain the size to a box.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You should always display images in web pages at 100% of their actual size. If the image needs resizing then use your graphics software to resize it before you upload it to the web.
    we can control our images in our own website. what about all the millions of webpage out there... if the problem can be solved by merely detecting the processor not being used too much and then display them on screen nicer.

  6. #6
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Quote Originally Posted by logic_earth View Post
    Browsers don't resize the image it is still the same size when it got it. All it does is constrain the size to a box.
    i am a CS major myself... so unless otherwise, when a 300 x 200 image get displayed on the screen as 100 x 66, pixel by pixel, there is still resizing going on, no matter it is all happening in RAM or whether it get saved as a file. unless it is using some graphics card function that i don't know about.

    in any event, it looks like extra effort is needed to make the graphics look nicer, and that effort doesn't cost us anything other than ldling processor time.


  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    No there is no resizing at all. The image's dimensions are not altered. The browser just constrains it to a box without resizing the image that is why it is ugly.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Quote Originally Posted by logic_earth View Post
    No there is no resizing at all. The image's dimensions are not altered. The browser just constrains it to a box without resizing the image that is why it is ugly.
    sigh.... you do have a fixed way of thinking...

    so the bottom line is
    1) the graphics is displayed on screen, pixelated, agreed?
    2) extra time is needed to make it look better, agreed?
    3) the processor, being Duo core and Quad core, is not at 100% of processor load most of the time. And browsers can actually detect whether it is busy before it make the graphics look better.

    whatever you call it, resizing or not, you still do it. Really, you don't need to save the file to call it "resizing". Just the fact that you are sampling the image in a very coarse way and then display it on the screen at a different size, that is resizing already. Tell me, you have an image of 300 x 200. Now you sample the image's pixels and then display it on the screen at 100 x 67, by painting pixel by pixel. (you do still have to paint the pixels, don't you?) the act of painting the pixel different from the original size, is resizing, right on the screen canvas.

  9. #9
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by winterheat View Post
    we can control our images in our own website. what about all the millions of webpage out there... if the problem can be solved by merely detecting the processor not being used too much and then display them on screen nicer.
    Why would you want to control other than your own images?

    Why not use some graphic library on the server?
    Dan G
    Marketing Strategist & Consultant

  10. #10
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    Why would you want to control other than your own images?

    Why not use some graphic library on the server?
    no i am saying wouldn't that be nice if browsers can be made to do that, or if the HTML or CSS can tell the browser to take extra time to resize a particular image more nicely.

  11. #11
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by winterheat View Post
    no i am saying wouldn't that be nice if browsers can be made to do that, or if the HTML or CSS can tell the browser to take extra time to resize a particular image more nicely.
    That wasn't what you asked in the first post:

    is there a way to tell the browser by HTML / CSS / browser settings, to take more time to refine it?
    So again:

    Why would you want to control other than your own images?

    Why not use some graphic library on the server?
    Dan G
    Marketing Strategist & Consultant

  12. #12
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    That wasn't what you asked in the first post:

    In my first post I am asking the same thing. Can the browser do it, or can HTML or CSS indicate the image is important so that the browser will do it.

    Or else how do you take the meaning of the original post versus the later one.

    I am not "controlling" other website's images. I am merely wanting to see it more nicely if displayed in a different size in my browser.

  13. #13
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browser can't do it - fullstop.

    Maybe you see this forum (the HTML and XHTML forum!) differently then I do, because I see this forum not about discussing what features should be included in browsers but how can something be achieved with existing solutions.

    And my questions were based on this.
    Dan G
    Marketing Strategist & Consultant

  14. #14
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    Browser can't do it - fullstop.

    Maybe you see this forum (the HTML and XHTML forum!) differently then I do, because I see this forum not about discussing what features should be included in browsers but how can something be achieved with existing solutions.

    And my questions were based on this.
    so how about the question that can HTML or CSS tell the browser to do it. If we accept things the way they are, that's fine too. But at a certain degree, we can't. Otherwise we'd still be using HTML 1.2 rather than 4.01. Or drinking from a river.

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Browsers are not supposed to resize images. The reason for supplying a size in the HTML/CSS is so the browser can leave a space for the image to display in. That space is supposed to be the same size as the image actually needs.

    Using HTML/CSS to make an image bigger will result in its being blurred as there is insufficient info in the image to display clearly at a larger size.

    Using HTML/CSS to make an image smaller means that the page is taking significantly longer to load since the image file is bigger than it needs to be.

    You should either upload images to the server that are already the right size or use server side processing to resize them once they are uploaded. The browser should only ever retrieve an image that is the same size as the HTML/CSS says that it is. Removing the size of images from the HTML/CSS should not change the final appearance of the page if the images actually load.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With browser I included HTML and CSS, so no, not possible.

    And as I said, I don't see this particular forum for a discussion about improvements to either Browser, nor HTML/CSS. There are better places to voice your opinion and advocate changes in that regard.
    Dan G
    Marketing Strategist & Consultant

  17. #17
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Browsers are not supposed to resize images. The reason for supplying a size in the HTML/CSS is so the browser can leave a space for the image to display in. That space is supposed to be the same size as the image actually needs.

    Using HTML/CSS to make an image bigger will result in its being blurred as there is insufficient info in the image to display clearly at a larger size.

    Using HTML/CSS to make an image smaller means that the page is taking significantly longer to load since the image file is bigger than it needs to be.

    You should either upload images to the server that are already the right size or use server side processing to resize them once they are uploaded. The browser should only ever retrieve an image that is the same size as the HTML/CSS says that it is. Removing the size of images from the HTML/CSS should not change the final appearance of the page if the images actually load.
    the discussion here is as a web designer we should this, we should that. but do you know that this is not a perfect world, so some websites embed an 300 x 200 image as 100 x 67, and the image looks really bad because the browser take very little time to display it nicely. if the browser use a more time consuming algorithm to display it, the image can look much nicer, as if it were resized using Photoshop or IrfanView. So I was only asking can HTML or CSS tell the browser to take extra time to display it. So if there is no such directive, so be it. I am not really looking for "we should always resize our images" here.

  18. #18
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    With browser I included HTML and CSS, so no, not possible.

    And as I said, I don't see this particular forum for a discussion about improvements to either Browser, nor HTML/CSS. There are better places to voice your opinion and advocate changes in that regard.
    well I am asking whether HTML or CSS can do it. Isn't this forum for asking how to do things in HTML or whether it is possible to do something in HTML?

  19. #19
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have been given various solutions of how you can achieve what you're looking for, Photoshop and a server-side graphic library. Here is another one using Javascript: http://www.agilepartners.com/blog/20...ng-javascript/

    And your question has been answered with regards whether you can achieve it within the Browser/HTML/CSS multiple times within this thread!

    And you said it right, we are web designers, not browser developers, so again, I advise you to look for a better place to voice your opinion and advocate change.
    Dan G
    Marketing Strategist & Consultant

  20. #20
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    You have been given various solutions of how you can achieve what you're looking for, Photoshop and a server-side graphic library. Here is another one using Javascript: http://www.agilepartners.com/blog/20...ng-javascript/

    And your question has been answered with regards whether you can achieve it within the Browser/HTML/CSS multiple times within this thread!

    And you said it right, we are web designers, not browser developers, so again, I advise you to look for a better place to voice your opinion and advocate change.
    the issue stemmed from website of Eric Meyer, who is a CSS master.

    http://meyerweb.com

    the "AN EVENT APART" logo on the right looks really bad on the right hand side of the page. And I understand: we are busy people. Some time we can't do things perfectly but the computer might be able to help.

    But I just found a partial solution actually: using Safari on Windows (and probably on Mac too), the image looks much better. The words are legible. If you can, try it on IE or Firefox on Windows. The image looks pretty bad. Even on Firefox on a Mac, I suspect the image looks pretty bad too.

    Yeah so if Javascript can resize it better somehow, or if IE or Firefox can add an add-on. I know it is out of the HTML realm. But if HTML or CSS doesn't have such a directive, knowing what the issue is and what partial solution people can view it with can be helpful, isn't it?

    the images are attached here:

    on FireFox 2 on Windows

    on Safari 3 on Windows

  21. #21
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, why are you concerned about others? One of the questions I asked you earlier on, if you remember.

    We are webdesigners, it's our job to do it right for the websites that are under our control. If you want to change how the browser works, please by all means advocate for a change, but this isn't the right place to advocate it.

    Everybody on here will agree with you that the rendering of "resized" images in Firefox, IE, etc. could be improved, but you can't change anything about it when all you do is voice your opinion in this particular forum => waste of time.
    Dan G
    Marketing Strategist & Consultant

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Seems to me you'd have to add such algorithms exactly like the ones used by my filesystem to make "thumbnails" of images to the browser itself.

    Opera might already have it, as it can show a shrunken version of a website when you hover over a tab, and it usually looks pretty good. But that's out of our hands. And personally I don't want any websites checking my computer to see how much available processing power I have. That's none of their business. The reason why I have NoScript running anyway.

  23. #23
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    Again, why are you concerned about others? One of the questions I asked you earlier on, if you remember.

    We are webdesigners, it's our job to do it right for the websites that are under our control. If you want to change how the browser works, please by all means advocate for a change, but this isn't the right place to advocate it.

    Everybody on here will agree with you that the rendering of "resized" images in Firefox, IE, etc. could be improved, but you can't change anything about it when all you do is voice your opinion in this particular forum => waste of time.
    so i started the question wondering if any HTML or CSS can help this issue. And should I stop upon anybody's suggestion that there is no solution in HTML or CSS that can do it? His answer is almighty true? Can anybody open up new light? No further discussion should be permitted? We can't talk about how it affects us in general? Wow you really have a human heart.

  24. #24
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Seems to me you'd have to add such algorithms exactly like the ones used by my filesystem to make "thumbnails" of images to the browser itself.

    Opera might already have it, as it can show a shrunken version of a website when you hover over a tab, and it usually looks pretty good. But that's out of our hands. And personally I don't want any websites checking my computer to see how much available processing power I have. That's none of their business. The reason why I have NoScript running anyway.
    I didn't suggest that any website checking how much processing power you have. It is intelligently done by the browser, seeing that the computer is not doing too much, and draw the image better on screen. Nothing is revealed to the website.

    And maybe HTML can have an attribute or CSS style that says, this image is important, please render it better. A good reason is that if we have an image 200 x 150 to start with, it is time consuming and tedious to resize it to all sizes 80px width, 50px, 30px for different purposes. It is time consuming to deal with all the resizing with human's designer's effort, and it is easy to induce missing image errors with all these different filenames. if the webpage design can indicate in HTML or CSS to tell the browser, please, the image can be displayed nicer, perhaps because it has text in it, or for any other reason.

  25. #25
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By all means, don't stop the discussion, but bring it to a place where you can actually do something about it! This is the wrong place, for this.

    If you really think this is so important, why don't you go to the places where you can actually change something?

    This place is about providing (existing) solutions to problems. You've been told multiple times that what you are looking for is not possible, but provided you alternative solutions.

    P.S. this is the last reply from me, I'm unsubscribing from this thread (a first for me!).
    Dan G
    Marketing Strategist & Consultant


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •