I hesitated to enter the conversation earlier... the image solution I use works
very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy.
SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it.
You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the
InsertImageSVG plugin to do most of the work for you.
If you're manually entering it: put the image on it's own xhtml page and use the following code:
Code:
<body>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="100vh" width="100vw"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 800 1100"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="800" height="1100" xlink:href="../Images/SampleImage.png"/>
</svg>
</div>
</body>
You will need to put the image dimensions in the appropriate places (image height in the
red area, image width in the
blue area) and the image location/filename in the
green area.
I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there!

Find the happy medium.
Cheers!