Images not shown at 1:1

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Images not shown at 1:1

Unread post by Peter Muckle »

Hi,

I am finding that images are looking more blurred than I would like.

The attachment shows the problem - all screenshots of the same png file. The 'image display' size is set to 100%. The webhelp is HM7 responsive skin.
Capture.PNG
It appears that the image is enlarged to around 125% when the screen zoom is set to 100% (middle) in the browser; if the screen zoom is set to 80% the image is shown at the original size (100%).

I would like the image to show at 100% when the screen zoom is 100%.

What am I missing?

Thanks

Peter
You do not have the required permissions to view the files attached to this post.
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Re: Images not shown at 1:1

Unread post by Peter Muckle »

I found that if I set the image display size to 80% then the image shows at 100% when the browser is set to 100% screen zoom.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Images not shown at 1:1

Unread post by Tim Green »

Hi Peter,
I found that if I set the image display size to 80% then the image shows at 100% when the browser is set to 100% screen zoom.
It's actually no longer advisable to use fixed size scaling for images because that will often not work well on mobile devices, and you can easily get similar problems on desktop machines as well when the user needs to make the browser/viewer window particularly small or narrow for any reason. It's preferable to use the % of page width, maximum is physical width setting. That will allow the image to scale automatically with the page without scaling up excessively. The "% of page width" is actually % of cell width in tables, by the way.

The days of a "1:1 display" actually having a real meaning are gone for good and we really need to move on. There are so many different scaling factors involved in monitor display now that you will almost never get a 1:1 display, and even when you do it won't really be 1:1 except on old monitors where each pixel on the screen really does represent one pixel in the image being displayed. Modern monitors no longer do that because their physical pixels are so tiny. Each image pixel is now displayed as a virtual pixel, consisting of a group of physical pixels, which are also anti-aliased. Then there are other factors like the type of pixels (oblong or square), the physical size of the screen, the user's own zoom setting, the scaling factor of the operating system itself for the screen and more. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Re: Images not shown at 1:1

Unread post by Peter Muckle »

Hi Tim,

But why is it enlarging by 125% when it doesn't need to? It is really ruining the look when it is unnecessary.

I have never noticed this effect when working with html before.

H&M output *can* make the images appear sharp by reducing to 80%, which shows it is possible.

It is also happening in the H&M help itself, as attached; it should look like the left hand side, it looks like the right hand side. How can this be output so it is not fuzzy? Does anyone else have this problem? If the left side looks sharper, there is a problem somewhere.
compare.png
If you could point me to an H&M file with an image without the fuzzy edges @100% I will accept it is my monitor :)

Thanks

Peter
You do not have the required permissions to view the files attached to this post.
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Re: Images not shown at 1:1

Unread post by Peter Muckle »

Just checking to see if my Windows display settings for scale and layout are having an effect.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Images not shown at 1:1

Unread post by Tim Green »

Hi Peter,

It's not possible to see which skin you are using from your screenshots, and you didn't say specifically. However, if you're using one of the Premium Pack responsive skins or if you have set the text size in your project to ems/rems then image size is no longer defined in pixels but in relative ems/rems (this is automatic in the PP skins, overriding your project setting). The image size display will then be entirely relative and the units will be based on the base text size. When the text size changes the image size will change with it. In the PP skins this also depends on the text size setting adjusted by the user with the larger/smaller text option in the hamburger menu.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Images not shown at 1:1

Unread post by Martin Wynne »

Peter Muckle wrote:I would like the image to show at 100% when the screen zoom is 100%.
Hi Peter,

You can fix this for your own browser, but it won't work for everyone else.

In Firefox, enter about:config in the address bar. Click through the warning and be careful. :)

Search for: layout.css.devPixelsPerPx

Right-click on it and click Modify. Change the value to 1. It is probably set on -1 (the default, which scales from the screen DPI setting).

This will affect all web sites. If you have been in the habit of viewing them at 80%, you will need to change them to 100% (Ctrl+0).

The same is possible in other browsers, but the details may differ.

cheers,

Martin.
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Re: Images not shown at 1:1

Unread post by Peter Muckle »

Thanks both,

It was the standard skin I used. I also had the same effect with the online help for H&M, whichever skin that uses.

I eventually remembered that 4 years ago (when I got a new monitor) I updated 'scale and layout' settings to 125% so the system font would be easier to read. I reset it to 100% and the images look as they are supposed to, it is just now the text is too small on my monitor!

So my 80% screen reduction in the browser (which I usually default to 125%) to get a clean image can be explained there I guess. Although I have not noticed the same effect before (in 4 years), and have done a lot of graphics work.

The effect is like the system enlarges the image 125% so it looks like a bad jpg, then displays it at the intended size but as a reduced version of the blurry enlargement.

Cheers

Peter
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Images not shown at 1:1

Unread post by Tim Green »

Peter Muckle wrote:The effect is like the system enlarges the image 125% so it looks like a bad jpg, then displays it at the intended size but as a reduced version of the blurry enlargement.
And that is exactly what I was talking about in a nutshell. :) There is no 1:1 any more. It has gone the way of the dodo, we just have to deal with it.

The best way to get reasonably sharp screenshots is to make them on a 4K or other high-resolution monitor and scale them down in the editor. Then use a responsive setting for the scaling and it will look a lot better, scale responsively and with a bit of luck, also look OK when scaled. More isn't possible.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Peter Muckle
Posts: 101
Joined: Fri Oct 18, 2019 9:33 pm

Re: Images not shown at 1:1

Unread post by Peter Muckle »

Like I said, it is only H&M output that is affected and I've had the monitor for 4 years.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Images not shown at 1:1

Unread post by Martin Wynne »

Peter Muckle wrote:Like I said, it is only H&M output that is affected and I've had the monitor for 4 years.
Hi Peter,

I use this function to prevent images going fuzzy by being enlarged by the browser. It doesn't prevent them shrinking if necessary on smaller devices. It means though that your images will appear quite small on very high resolution screens.

You can test it by increasing the browser zoom, and then doing a page refresh. After a moment the images will shrink back to the size before you zoomed the page, i.e. to the original size you created them.

It needs to be executed after a page has loaded. That means adding the function to the <head> section of the topic page template (the one in the skin, if you are using a skin), and then adding it into the onload event:

Code: Select all

<script>
function fix_max_image_widths()
{
  var ratio = 1.0;
  var n;
  var vimg;
  
  if (window.devicePixelRatio)
  {
    ratio=window.devicePixelRatio;
  }
  else
  {
     // try for IE's screen ratio
    if(screen.deviceXDPI)
    {
      ratio=screen.deviceXDPI/screen.logicalXDPI;
    }
  }

  var v = document.getElementsByTagName('img');

  for(n=0; n<v.length; n++)
  {
    vimg = v[n].naturalWidth/ratio;
    v[n].style.maxWidth = vimg + "px"; 
  }
}
</script>
If you can't put the above in the page template, insert this below version as an HTML Code Object at the end of each topic, maybe as a snippet:

Code: Select all

<script>
  var ratio = 1.0;
  var n;
  var vimg;
  
  if (window.devicePixelRatio)
  {
    ratio=window.devicePixelRatio;
  }
  else
  {
     // try for IE's screen ratio
    if(screen.deviceXDPI)
    {
      ratio=screen.deviceXDPI/screen.logicalXDPI;
    }
  }

  var v = document.getElementsByTagName('img');

  for(n=0; n<v.length; n++)
  {
    vimg = v[n].naturalWidth/ratio;
    v[n].style.maxWidth = vimg + "px"; 
  }
</script>
This works in H&M skins up to PP V.2 -- I don't know about PP V.3 because of the way they are loaded and refreshed. Tim can advise.

As above it applies to every image on the page. If desired it can be modified to not apply to images below a specified size, such as icons and spacers.

p.s. this is my "Meccano" style of web page design -- almost certainly an IT professional will come along to say it's all wrong. :) However it works fine for me and tested in Firefox, Opera, Chrome, Edge, IE (all on Windows10). I don't know about Safari.

It means my screenshots appear crisp as designed, at the design size, on all screens, all zoom levels, all DPI settings -- or at least all the ones I have tested. Or smaller, if the image width has been set responsive for small devices. There may occasionally be a very tiny amount of fuzziness due to rounding effects in the maths, causing an error of +/-1 pixel. For example, an image say 960 pixels wide might be displayed in some cases at 959 or 961 pixels wide.

cheers,

Martin.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Images not shown at 1:1

Unread post by Martin Wynne »

Just returning to this to add that my function posted above fails in a situation where an <img> element is created with an empty source on loading, to be populated later by scripting. For example some slideshow applications create an array of images and then transfer each one into the visible element as the show proceeds.

I don't think that situation is very likely in H&M applications, but if needed a partial fix is to change:

Code: Select all

    v[n].style.maxWidth = vimg + "px";

to:

Code: Select all

    if (vimg>0)
    {
      v[n].style.maxWidth = vimg + "px";
    }
which will allow the slideshow images to be displayed, but they won't be controlled by the above function, and won't necessarily be at 1:1.

It might be possible to modify the slideshow script to call this function after displaying each image. Similarly any other web page where images are loaded by scripting after the page has loaded.

cheers,

Martin.
Post Reply