Retina Friendly Graphics

[Leafcutter]

Standard buttons, logos, etc. look blurry on retina (high resolution) screens. The typical HTML workaround is to provide an image file at 2x the desired dimensions, and then use the width and height specifications within the <img> tag to scale it back down to the desired size. This results in a crisp looking button or logo on retina screens without increasing the displayed size of the image. The problem is that the "Store Text" menus do not allow us to specify the width and height along with the file name. The easiest fix here would be to simply provide the optional ability to specify this for each button, logo, etc. via these "Store Text" menus.

Or perhaps someone has figured out an alternative workaround using the existing options? Thanks!

-Devin
Leafcutter Designs
http://www.leafcutterdesigns.com

[Jim]

You can do this already If you upload your own images for the buttons. After you have uploaded the image (at the 2X size) use the Images > (select the desired image) > Edit Images button to allow you to edit the image attributes.
On the "Edit Images" screen in the section "<img> Tag Attributes" set the Size height and width to your half size dimensions. Note: the message "Changing the size attribute does not change the actual image size." means that the actual image size will not be changed so whatever size you upload will be what the viewer has to download. The size you specify in the height and width fields will be used for the Height and Width when the image is displayed, resulting in your large image being compressed to half size.

[Leafcutter]

Jim - Thanks for the tip here. I tried this approach. While the new high-res checkout button shows at the proper reduced image size via Images > View Image, the auto-generated shopping cart page (order.cgi) is not inserting the newly added height and width attributes properly. This is probably because, since it's a checkout button, it requires an <input type="image"> tag, not a regular <img src> tag.

Here is the relevant HTML from order.cgi:

<input type=image src="http://www.leafcutterdesigns.com/shopsite/media/ss-button-checkout1.gif" class="button8" align="bottom" border="0" id="Checkout" name="Checkout" alt="Checkout" title="Checkout" tabindex="6" onClick="return(CheckIt(8,0));" >

Note there are no height and width attributes in the HTML code generated by order.cgi, even though I've specified them for the "ss-button-checkout1.gif" image file.

Let us know if this is a problem on ShopSite's end or something I did not configure properly. Thanks, -Devin

[Jim]

If it is an input button the the height and width won't be added.
What you might try is modifying the style that is assigned to the class="button8" and see if adding a height and width to that will fix it.