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

With regards to hiDPI image conversion...

  • January 24, 2018
  • 1 reply
  • 7367 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?

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

    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

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices