How can I change the world view with an high quality jpg of a fantasy world in openlayer?

Question

I tried with the static-image.html but it square the image and if I zoom I lose the quality of the image. I have to say that I'm better on html and css then java ( I've never used ) but I would be very happy if someone help me with this problem.

And how I can change from an url into a src if I want to put the image that I want to use as map on a folder?

(window.webpackJsonp=window.webpackJsonp||[]).push([[133],{370:function(e,n,t){"use strict";t.r(n);var o=t(3),c=t(2),i=t(1),a=t(68),s=t(70),m=t(215),p=[0,0,1024,968],r=new s.a({code:"xkcd-image",units:"pixels",extent:p});new o.a({layers:[new a.a({source:new m.a({attributions:'© ***<a href="http://xkcd.com/license.html">xkcd</a>',url:"https://www.loremipsum.com/***",projection:r,imageExtent:p})})],target:"map",view:new c.a({projection:r,center:Object(i.y)(p),zoom:2,maxZoom:8})})}},[[370,0]]]);
//# sourceMappingURL=static-image.js.map

Answer 1

You can get a sharper image when zoomed in if you turn off image smoothing

In OpenLayers 6:

imageLayer.on('prerender', function (event) {
  event.context.imageSmoothingEnabled = false;
  event.context.msImageSmoothingEnabled = false;
});

In versions 3 to 5:

imageLayer.on('precompose', function (event) {
  event.context.imageSmoothingEnabled = false;
  event.context.msImageSmoothingEnabled = false;
});

msImageSmoothingEnabled is only necessary if you need to support Internet Explorer