read_connect(); //$GLOBALS[ezoic_db]->read->query("use 17things"); ?>

How can you scale images to look the same size in different resolutions?

I’m making a website and I need an image to look the same in all resolutions. I’ve heard that using percentages instead of pixels works but how do I know what percentages to use? I tried guessing the percentages but it seems I was a bit off because the image looked pixelated in different resolutions.
Is there an easy way to do this?

Related Items

4 Responses to “How can you scale images to look the same size in different resolutions?”

  1. dhvrm said :

    All images look the same at all screen resolutions, because all screens render images at 72 dpi, so I am not sure what you are talking about.

    As long as your image has a resolution of 72 dpi, it will look right regardless of screen size, if that is what you mean.

    http://www.dougv.com/blog/2007/11/05/the-relationships-between-pixels-points-picas-dots-and-inches/

    UPDATE:

    In reply to the comment than 72 dpi is a “fallacy,” I suggest the answerer spend less time with minutae and more time reading my blog.

    The size of a pixel on the screen is meaningless. What really matters is that no matter what, those pixels are a fixed number and maintain a fixed distance from one another.

    Thus, all screens resolve at 72 dpi because again, a point is a dot is a pixel, and there are 72 points per inch in printer’s measures. The same way that a printer can’t make anything smaller than a point, a screen can’t make anything smaller than a pixel. The difference is that a printer can move the dots together or apart. On a screen, the dots stay in the same place, period.

    The fact that you have smaller dots in a screen doesn’t mean you get a different screen resolution. It simply means the screen is bigger.

    Whether the dot on a screen is .25mm or .29mm or 5 million mm, a dot is still the smallest size the screen can render, and it still needs to make 72 of them to an inch.

    Worse than a misinformed answer is sophism. Worse than sophism is sophism that relies on obfuscation to make its point. And the worst of all is obfuscated sophism that calls someone else’s correct answer “fallacy.”

  2. dB said :

    hmm, I think I may be able to help, but I am not exactly sure

    Do you have different versions of the same image stored at different resolutions eg.72dpi,96dpi, 150 dpi, 300dpi
    and also at diffrent sizes eg thumbnails, web display, and high quality.

    I have developed a class in PHP that will get the image size, and dpi, work out the orientation,ratio, and figure out what is the best way to display it.

    ps. it is not easy

  3. Brian said :

    You would need multiple resolution photos. and use javascript. Screen.width and Screen.height to figure out what resolution the user is using. After you figure out what his resolution is, you will use the images

  4. vftw.com said :

    Web browsers in general do not filter an image when resizing it. So, some pixels get simply omitted if reduced, or doubled if enlarged hence the pixelated look.

    Question is, Why do you want to automatically resize images? Viewing behaviours vary greatly between users of a smaller screen with a lower resolution and those with a large higher resolutions screen. The latter would rarely browse using full screen windows. I don’t on my 21 inch screen. So a larger image isn’t necessarily a requirement for people with higher res screens.

    Also, % unit sizes are relative to the containing element, and not the actual image size.

    Now a little about DPI:

    The 72dpi monitor is a fallacy. Computer screens nowadays are of a much higher resolution.

    A 72dpi screen would have a dot pitch of 0.35mm. A 15 inch monitor that can display 1024×768 has a dot pitch of around 0.29mm. A 20 inch screen at 1600×1200 has a dot pitch of around 0.25mm. All far higher than 72 dpi.

    Most screens nowadays are in general around 96 to 100 dpi, but may vary. And what the OS thinks your screen dpi is may not even be accurate.

    And even if they were, the dpi metrics of an are image are not used by any of the operating systems (Except perhaps in image editing software). They are all displayed using their pixel dimension. Which gives them different sizes on a given screen at different screen resolutions.

    Update@dhvrm: A point is not a pixel. Windows, OS X and X.ORG all use logical dpi for font rendering, at around a 3/4 point system. So again, A point is not a dot is not a pixel. Some laptop screens can even have 160 dpi screens, where at 72 dpi you can’t even fit 1280 pixels across a 17 4:3 screen. When it comes to LCDs you can’t even claim they overlap.

    @Alborz, sorry if you don’t understand the dpi talk. Ignore all dpi related talk in all the posts. They bear no relavance to your question.




Message:

[newtagclound int=0]

Subscribe

Recent Comments

Recent Posts

Archives