Skip to main content
R
r_tist
Inspiring
January 24, 2018
Answered

With regards to hiDPI image conversion...

  • January 24, 2018
  • 1 reply
  • 7438 views

Is retina.js a tool that should be employed for handling hiDPI images for retina display? Would you recommend it?

regular:

<img src="/images/my_image.png" />

script checks for alternative and will pull in on retina displays:

"/images/my_image@2x.png"

Another tutorial I found online said to keep the 72dpi, and going forward, double the width of the image size (the height to follow suit to constrain proportions). Then use more compression techniques in your 'save/export for web'. Tutorial noted your large image might wind up being less kb than original size you had previously.
Apply global CSS:

portfolio-pics img {

max-width: 100%;
height: auto;

}  ... and if you cannot do this, to make note in the image tag, width="700" as to the actual size needed on the page.

Which of these techniques would you be more comfortable / trusting of to take care of this ever-evolving era in screen displays?

I am curious as to your thoughts on these solutions; not interested in using the <picture> tag.

...I did experiment with the second option mentioned for a blog site, and it did work out nicely. In that test, I used a single 72 dpi image 'doubled up in dimensions'... then just cited the dimensions desired on the page to down-size/down-scale.

Thank you.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    https://forums.adobe.com/people/Per+Berntsen  wrote

    Hi Nancy,

    I have done some superficial reading on <picture> and <srcset> previously, but found it hard to grasp.

    The article you linked to seems to be easier to understand. (but I thought "Responsive images" usually referred to the max-width:100% property)

    What I'm curious about, and that the article doesn't seem to mention, is how <picture> and <srcset> deal with browser scaling on high resolution screens.

    Is the scaling of images to 200% prevented?

    If you want simple, use SVG which retains image quality at any scale on any device.

    With raster images it's more complicated.   A 2x image will render correctly on a retina display.  If no 2x image is available, the 1x image will take its place and the browser will upscale it unless you define the actual width of your 1x image somewhere.

    https://medium.com/@micjamking/hd-retina-display-media-queries-b5562b5430d6

    Max-width: 100%  will give the best results with raster images because it doesn't up-scale beyond the image's native height and width.   But it allows for down-scaling to fit smaller displays.

    Width: 100% allows for up-scaling small images to fit bigger viewports however that is likely to cause distortion with JPG and PNG on very large displays.  On the other hand, SVG is no problem because it remains crisp at any scale.

    Nancy

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 24, 2018

    I don't use retina.js.   Never did.  I found problems with it when I tested it a few years ago.

    Moderns browsers are supporting <picture> and <srcset>  now.   So that's what I use.

    Responsive images - Learn web development | MDN

    In Photoshop, use File > Export > Export As to generate 1x, 2x and 3x images.   More pixels gives better resolution and bigger file size, too.  So move the quality slider down to reduce file size. 

    Nancy O'Shea— Product User & Community Expert
    Per Berntsen
    Community Expert
    Per BerntsenCommunity Expert
    Community Expert
    January 24, 2018

    Hi Nancy,

    I have done some superficial reading on <picture> and <srcset> previously, but found it hard to grasp.

    The article you linked to seems to be easier to understand. (but I thought "Responsive images" usually referred to the max-width:100% property)

    What I'm curious about, and that the article doesn't seem to mention, is how <picture> and <srcset> deal with browser scaling on high resolution screens.

    Is the scaling of images to 200% prevented?

    O
    osgood_
    Legend
    January 27, 2018

    osgood_  wrote

    Actually lm not asking anthing in specific just what is  considered the main stream approach to not only cater for standard resolutoin devices but also those with hidef displays when serving images to them.

    I have been using a server side PHP script called retinaimages.php to serve @2x images to hidpi screens. (it also requires a modified .htaccess file)

    You can see it in action on my website - http://perberntsen.com

    Since browsers scale everything to 200% on hidpi screens, causing blurry images, this method tricks the browser into thinking that the image already has been scaled, and displays the @2x image according to its pixel dimensions. Not sure how this is actually done, since I know nothing about PHP.

    It would of course be much better if one could use HTML and CSS to achieve this, but I find <picture> and <srcset> etc. confusing.

    Will do some testing when I get the time.


    Thanks Per, its good to know at least someone is using some method  to do this. Ive not really looked into it too much on account its a bit of a grey area but now l am it seems to be more confusing than l initially thought. It seems we are now suggesting to do things which were considered inapproriate until they become appropriate in the eyes of the evangalists........serve huge images to hidef devices with limited bandwidth or download speeds.............your choice, slower download speeds and sucking your bandwidth up  but nice images or faster download speed  with blury images.........you could not make this stuff up if you tried.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices