@TonyHall
The easiest way would be to ensure that your source image is large enough and have the browser downsample it by half in both dimensions.
If your logo image is 200px x 150px, for example, then you could use something like the following for your backButtonText.
<img src="logo.jpg" width="100" height="75" />
This should hopefully work OK and be a suitable solution for you.
To avoid browser downsampling on non-retina displays, you'd need to provide two separate images (one for regular displays and another for retina displays, use the smaller of the two images for the backButtonText, wait until the gallery has loaded (using the Juicebox-Pro API's onInitComplete() function), detect the pixel density of the user's display and, if necessary, replace the smaller image with the larger one using JavaScript (to apply custom HTML code to the CSS class that Juicebox-Pro uses for the Back Button).
If you had two images, a small one at 100px x 75px ('small.jpg') and a large one at 200px x 150px ('large.jpg'), then you could use the following as your backButtonText:
<img src="small.jpg" width="100" height="75" />
... and use the following embedding code:
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222'
});
jb.onInitComplete = function() {
if (window.devicePixelRatio >= 2) {
$('.jb-go-back-text').html('<img src="large.jpg" width="100" height="75" />');
}
};
</script>