With regards to hiDPI image conversion...

[r_tist]

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.

[Nancy OShea]

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. 

[Per Berntsen]

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 · Accepted solution]

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

[r_tist]

This is exactly what I was looking for. Here's my question...so now I have 2 files, the general .jpg at about 200kb and the @2x winds up about 500kb. - If the images are getting called into a lightbox; are you telling me the retina display computer sifts through the images folder options and computes @2x and knows to pull that one in as a substitute for those retina ready screens?

This is where I need clarification as how to apply to this scenario:

<figure><a href="img/paintings/seaview.jpg" data-lightbox="Paintings" alt="Painting of the sea"></a></figure>

As is, I've never had to indicate the width & height of the image. It automatically displays that accordingly.

Thank you! This will clear up so much of the confusion in applying this technique.

[Nancy OShea]

Does your LIghtbox script support  srcset or <picture> element?

That's a fundamental question.  If it doesn't, you'll be feeding a lot of unwanted bandwidth to people.

The latest version of FancyBox 3 does support srcset.

fancyBox - touch enabled, responsive and fully customizable lightbox script

<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
<img src="thumbnail.jpg" />
</a>

If you decide to use FancyBox 3 read the licensing requirements.

fancyBox - Touch enabled, responsive and fully customizable jQuery lightbox script

[osgood_]

I dont think that is for detecting  hi-definition screens, its for detecting window width and serving the appropriate image based on that, which is different?

Admittedley I dont know much about detecting hi-def screens and serving the appropriate hi-defintion images, along with most. Its still a thorn in every developers backside. There are ways using javascript or jquery, but never tried them.

Im waiting until something emerges which is considered the main stream way of dealing with a situation which is becoming relevant but l dont see many doing anything about it right now according to the code lm looking at unless its being evoked by some js file which l probably would not investigate.

So if anyone else has any thoughts please chip in as its a subject which needs clarifying and addressing.

[B i r n o u]

using picture and source and/or srcset can refer on width property (vw) but also pixel density (2x)... and so on

Responsive images - Learn web development | MDN

[B i r n o u]

in case you don't want to read the entire paper... add #Resolution_switching_Same_size_different_resolutions to the URL

[osgood_]

Thanks for that link, lm working on it.

I guess it dont help if you dont have a retina/hi-def device to test it on......hummm.

Which leads me to ask.......when I get around to upgrading my Mac, sometime this year hopefully, l think buying a retina one is future proof BUT does that mean all those millions of websites with standard images are going to look rubbish?

[B i r n o u]

well I have recorded a training for helping people to explore the use and feel of those feature... and what I did, (that was the only scenarii that came to my mind at that time to have an approach allowing to better start and take in hands the specs and techs...)

so , I've proposed to add a training CSS file to each testing file...  that sheets handle and remove every margin, padding and sizing options... then to get a better decimal understanding was added a 62.5% font size on body (except if the user change manually the default browser font size...) that way em and rem became decimal... and are allow to get fluid tests... beside static tests

then a very large image background (2500 width) is added to the page ... this image is just made of grids and repers

after a different set of source image file was produced and provided ... those images are made of different size, resolution and a simple text describing on what device this image should appear and what are those specs (easy to catch when testing)

so you understand how the result of the mix between displaying images on the page background give as result... and expectation

(on a specific debug style sheet / javascript real time, one get added a aboslute floating window, that describe and contains the code used)...

for testing prupose, a responsive studio is made with tablet, smartphone, printer (PDF) ... android, Ios, VM Virtual box... and (well I know that you don't agree and like this but...) a grunt/gulp watch , connect , reload... tasks is running on background... that way one can directly see what's going on on each device...

then to complete the studio, a use of browser stacks is recommanded...

[B i r n o u]

ah... I forgot to add.. that those test as you can figure out... don't need the training support to be done... everybody can do it on this reciept as one needs... but... but... if you really want the tests work... dont forget to empty browsers cache (check also the don't use cahce property)... because one the large image is loaded... browser don't bother to use (if that is require) the lower one

[r_tist]

Yes! Not rubbish, but raster imagery a little fuzzy. (I got a new Mac a few months ago - that's when I discovered the issue) I've spent time updating logos and like items to SVG. But then there's all the fine artwork raster images in a portfolio. This is why I need to know how to edit my specific light box use case so it would know which version to pull in... the regular 1x jpg or the 2x jpg. 

<figure><a href="img/paintings/seaview.jpg" data-lightbox="Paintings" alt="Painting of the sea"></a></figure>

I will check if my lightbox supports the srcset... As in your example... can you confirm for my knowledge that with this setup, the system automatically will select the correct img size based on user's screen? It somehow just "knows"? No other support script is needed?

<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">

<img src="thumbnail.jpg" />

</a>

Thank you.

[osgood_]

Hummm....if i get a retina display then oh joy, almost all the websites l visit are going to have fuzzy images.......what idiot thought that one up without coming up with a fallback solution......

[B i r n o u]

well what you ask and propose as code... is a real merge of everything...

• data-* attribut, is non natively used by HTML... but it allows us to preserve a correct HTML tagged document, but need to be use by JavaScript
• <a> tag doesn't has any srcset attribute a – hyperlink (CHANGED) - HTML5

so if I unerstand quite well, what you would like to set is have different link to a final image depending on the screen resolution and size ?

I didn't dig i such a solution exist.. but I would personnaly use and refer to https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia

[osgood_]

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.

So far its just been a lot of hugely confusing replies as the OP is stlll asking what their code should look like to cater for retina devices. I have bought up a few questions in terms of serving mobile devices with large file because of the issues with download speed and bandwidth......so on the one hand for standard resolution devices we provide them with optimised images according to the window width yet on the other hand if they are hidef devices we provide twice or three times the image size  to cater for the resolution...........yet the download speed remains the same.

[Per Berntsen]

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.

[osgood_]

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.

[Per Berntsen]

Osgood and Paula,

When I taught myself HTML and CSS, I did it to be able to create my own website, and have my work online.

I am a fine art photographer, and sharp, detailed images is among the things I'm known for. Of course, a 1200 px image on a screen can never match a 75 x 100 cm (30 x 40") print, so I want these 1200 (or 2400) pixels to have the best possible quality, even if it means large files. So the increased file size for the 2x images doesn't bother me. Image quality is far more important to me than bandwith/download speed, and I think most of my visitors also expect this quality.

i do realize that working for a client is an entirely different situation, I do have the occasional client as well. But for my own website, I am in the lucky situation of being developer, designer and client at the same time.

Doubling the pixel dimensions of an image will normally increase file size by a factor of 4, but I have found that the 2x images (jpgs) can be saved with lower quality without any noticeable quality loss.(on hidpi screens)

So on average, my 2x images are on average about 2.5 times larger than the 1x images.

The largest 2x image at 2400px I have currently is only 1.08 mb, and most of them are around 700 kb.

[Nancy OShea]

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

Doubling the pixel dimensions of an image will normally increase file size by a factor of 4, but I have found that the 2x images (jpgs) can be saved with lower quality without any noticeable quality loss.(on hidpi screens)

Right.  I did some testing with the PS quality slider as well.  And on hi-res images, you can bring quality down to around 20% or lower.  Every KB saved is a KB earned .

[B i r n o u]

also don't forget this old post few months ago about image optimisation, I quote the intersting part...

"....

try different API for differents purpose or objectives

• https://abraia.me/docs/smartcrop/
• GitHub - adamdbradley/focal-point: A small set of CSS classnames to help keep images cropped on the ...
• Auto image crop, responsive images and image quality | Cloudinary Blog
• https://tinypng.com/developers
• GitHub - jonom/jquery-focuspoint: jQuery plugin for 'responsive cropping'. Dynamically crop images t...
• GitHub - smcyr/Craft-FocusPoint: A plugin for Craft CMS based on jQuery FocusPoint
  • above demo FocusPoint Example

... "

[Per Berntsen]

Yes, when exporting from Lightroom I use 60 quality as default for 1x, and 40 quality for 2x.

But if the image has a clear sky or other large flat areas, I have to use 80/60 to avoid jpg artefacts, sometimes 85/65.

[pziecina]

Hi Per,

I suspect your user case would be covered very easily using srcset, and the 'x' or 'w' setting, and the use of 3 or 4 images, (Ps can generate the 1x - 3x images easily). The basic code for this is in my first post in this discussion, but the reason I suggest using 1x to 4x is to try and make the images 'future proof' as best as possible.

My reason for saying use 4 images is because 4k consoles and 4k smart tv's are rising in the statistics provided by manufacturers, (how much one can believe them though, is for the individual to decide) and currently stands about 4-5% of internet viewing, plus it will also provides better images for larger hd displays if necessary.

Over the next 5-10 years a number of solutions will become viable for use, such as client side hinting, (for use in a server side database driven solution). Such items do take time due to the politics of spec creation, (if one browser includes something without consulting the others, you can almost guarantee, slower inclussion and a spec re-write).

i Don't know if your case is typical for Dw users, (I suspect it will be common though), but as the solution is the simplest to use, it may be worth suggesting to the Dw team that they at least make it a default option in srcset support.

[pziecina]

Sorry the example is in my second post, (no 12) not the first.

[r_tist]

Retina.js seems like it would solve the problem for my needs. It explicitly states the script will look to the server if user on a retina device or desktop,  and check for the @2x suffix & serve up that image if available.

Now, I am trying to test it out and it's not working. Would such a script still work in a lightbox? Or does that make it null & void?

Also, the documentation example happens to have the images folder named 'images'. Mine is called 'img'. - - Would that be hard coded in the script, or nothing to do with why it's not working? The instance I found in the script to wonder about this is: (see the instances I've bolded below) ...this question might not be what's causing this script to not work, but I would not know that for sure so looking for advice.

Retina.init = function(context) {

        if (context === null) {

            context = root;

        }

        var existing_onload = context.onload || function(){};

        context.onload = function() {

            var images = document.getElementsByTagName('img'), retinaImages = [], i, image;

            for (i = 0; i < images.length; i += 1) {

                image = images;

                if (!!!image.getAttributeNode('data-no-retina')) {

                    retinaImages.push(new RetinaImage(image));

                }

            }

            existing_onload();

        };

    };