SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2013
    Posts
    203
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    In other words image resol bigger than display resol... Image to appear in display re

    If serve a resolution 2x image in resolution 1.5x mobile device display or 1x display what should happen? In other words image resol is bigger than display resol... Image to appear in display resol or...?

  2. #2
    SitePoint Addict
    Join Date
    May 2013
    Posts
    203
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    also for 2x resolution image creation.... how ppi must be in adobe FW or PS?

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123 View Post
    also for 2x resolution image creation.... how ppi must be in adobe FW or PS?
    I am not entirely sure about your question so here are a few notes which may be of use.

    I am under the impression that most computer, mobile, phablet and tablet screens have a maximum screen resolution of 72 ppi. Using a higher ppi will increase the file size (slower file loading) and will not display any better quality.

    I am not sure about the latest Retina displays, no doubt some other poster will enlighten us ignorant folk

    As far as displaying larger image files on a small screen I opt for the following CSS

    HTML Code:
       
       <img src='very-big-image-1024x888.jpg' style='width:98%; max-width:1024px; border:0' alt='very big image scaled to suit all screen sizes' />
       
    Special notes:
    1. for screens smaller than the maximum image width a correctly scaled down image will display.
    2. for screens larger than the maximum image width the complete image will be displayed without scaling.
    3. 1024px corresponds to the maximum image width, larger values will display proportionately but lose quality.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lse123 View Post
    also for 2x resolution image creation.... how ppi must be in adobe FW or PS?
    My preferred solution is to make the image quite large (say twice the width and height you need it to display), and then save it at quite a low image quality in Ps (say around 30%). That way, it ends up looking nice on both normal resolution and retina screens, and can still have quite a small file size. (More info here.)

    I gather the only downside is that text within the image doesn't look so great sometimes ... but then, as a general rule I'd avoid placing text within an image anyway, as it's not the ideal for accessibility and flexibility (updating the text etc.).

  5. #5
    SitePoint Addict
    Join Date
    May 2013
    Posts
    203
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://css-tricks.com/snippets/css/r...y-media-query/

    For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina-specific stuff here */
    }

    QUESTIONS
    If serve a resolution 2x bkgd image in resolution 1.5x mobile device display or in 1x display what should happen? In other words image resol is bigger than display resol... Image to appear in display resol or...?
    Then in image edit software , also, for 2x resolution image creation.... how ppi must be in adobe FW or PS?


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
  •