I'm glad you've been able to implement my suggestions and that they're working well for you.

The embedding code I provided as a solution for #2 (see this forum post) can actually just be copied and pasted directly into your gallery's HTML web page (replacing any existing embedding code). You'd just need to supply a second, higher-resolution image (and change the gallery dimensions and background color if necessary).

Not only does it not matter, it actually needs to be like this.
All configuration option values are enclosed in double-quotes. If a value actually contains a double quote itself, then this double-quote needs to be escaped (as ") so that it is not confused with the closing double-quote at the end of the value.
Likewise, any < characters within configuration option values need to be escaped as &lt; so that they are not seen as opening tags (which would break the XML syntax).
I hope that makes sense.

Escaping XML entities is mentioned in the following FAQ (with a link to an online XML escape tool if you every need to edit your XML file manually).
How do I add HTML formatting to the Gallery Title or Back Button?

My solution works OK but it is not as efficient as it could be.
As you've noticed, on a retina display, both images are loaded (and the the high resolution image can be seen to load after the low resolution image).

If would be more efficient to always load only one image (depending on the device pixel ratio) and from a visual standpoint, you would not see one image being loaded on top of another.
You could initially set backButtonText="" and use something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        backButtonPosition: 'TOP',
        backButtonText: '',
        backButtonURL: 'http://www.example.com/index.html'
    });
    jb.onInitComplete = function() {
        var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
        $('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Just a small tweak to make things a little more streamlined.

The code above just took a minute to come up with as an alternative to my previous suggestion.
As long as you've been able to resolve your problem with a solution that you're happy with, that's great.

Unfortunately, the glitch with JuiceboxBuilder (whereby an error can be generated if the resize image dimensions are too large) has not yet been fixed but it has been logged as a bug and should be addressed by the developers in due course.
In the meantime, if you need to have large images in your gallery and find that JuiceboxBuilder is unable to resize them as required, then you could perhaps manually resize your images in an imaging program such as Adobe Photoshop before feeding them to JuiceboxBuilder and deselect the 'Resize Images' checkbox on the 'Images' tab (so that JuiceboxBuilder simply copies the images across to the output gallery folder).

You could try something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        backButtonPosition: 'TOP',
        backButtonText: '',
        backButtonURL: 'http://www.example.com/index.html',
        useFullscreenExpand: 'TRUE'
    });
    jb.onInitComplete = function() {
        var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
        $('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
    };
    jb.onExpand = function(expanded) {
        if (expanded) {
            window.setTimeout(function() {
                var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
                $('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
            }, 500);
        }
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The new part is the jb.onExpand code. You could restructure the code to make it more efficient and avoid duplication but I've just left it as it is (with the new code being just a separate addition to the code from my post above) so that's it's easy to follow.
Unfortunately, a short delay is required to ensure that the Back Button is present in the DOM (Document Object Model) before actions are performed on the CSS class after the gallery has been expanded.
The code is starting to get a little messy. This is one of the drawbacks of trying to do something with Juicebox that it was not designed to do. You tend to run into unforeseen problems and have to deal with them as your encounter them.

I would probably be inclined to do this myself. For the sake of a handful of kilobytes, the code would be cleaner and it should work in all scenarios without any further tweaking.
Just use a backButtonText entry such as the following (making sure that the display width and height are both half the actual dimensions of the image).

backButtonText="<img src="http://www.tonyhallphoto.com/jbresources/logo-backbutton-200x50.png" style="width: 100px; height: 25px; margin-top:-5px;" />"

In a Multi-Size Image gallery, 'Large' images are not currently displayed in high pixel density Windows desktop monitors but this has been logged as a bug and should hopefully be fixed in the next version of Juicebox.