SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image quality/resolution and responsive design

    This week I have been trying to get my head around image size resolution and quality for a responsive design,

    In my Google searching I have found many articles on the use of media queries, all of the articles talk about solutions that down size the image by cropping or re-sizing, so for example if you have a 1000 PX wide image it will be 700 for tablet, and 450 for Mobile ( very general)

    My problem with this is that a new 7 inch tablet has a resolution of 1024px and a top mobile in landscape is not much smaller, so I still want a 1000 PX slideshow to show my images to the full on a mobile in landscape,

    So I have been playing with image quality
    I had always saved my images at 85%, but after playing I can get away with much smaller,
    Desktop at 50%
    Tablet at 20%
    Mobile at 5%
    And the images still looked excellent,

    I have not found a solution yet that uses quality as a reducing factor, do you know of one?



    Sent from my Nexus 7 using Tapatalk 2

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simon Pieters

  3. #3
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't go much lower on the resolution. All devices are different and the mobile ones now are catching up in terms of PPI. 1080p screens aren't as rare and the quality difference will be noticeable.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the key is in the ppi

    if we have an image at 1080px across its long edge this will fill our 7" tablet, most notebooks, loads of new mobiles and quite a few desktop screens, this is because these devices are physically 1080px wide, but there size is very different, 3" for a mobile, 7" for a tablet, 12" for the notebook and 20" for the desktop,
    when you are cramming so many pixels per inch into a smaller size you seam to be able to get away with a much lower quality image, I believe this is because the artifacts that become obvious on a larger screen don't show up on the smaller devices,

    look at these examples on the various devices, this is the same size image, it has just been saves at a different quality, you will see what is unacceptable on a pc monitor is excellent on a mobile

    820px by 420px image saved at 80% quality 185k
    samp-80.jpg

    820px by 420px image saved at 70% quality 145k
    samp-70.jpg

    820px by 420px image saved at 50% quality 85k
    samp-50.jpg

    820px by 420px image saved at 40% quality 68k
    samp-40.jpg

    820px by 420px image saved at 20% quality 49k
    samp-20.jpg

    820px by 420px image saved at 10% quality 35k
    samp-10.jpg

    820px by 420px image saved at 05% quality 29k
    samp-05.jpg

    what do you find acceptable?


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
  •