What Is A “Retina-Ready” Logo? #
Many devices these days use Retina or some form of high definition screen (eg. iPhone, iPad, MacBook Pro, Google Nexus Devices, etc..) which use four times the pixels found in standard definition screens. Because of this you may find images on such HD screens to look blurry or grainy.
To address this you will find various solutions involving tools such as javascript and/or CSS, properly scaling larger images to maintain their proper dimension while providing more crisp and clear renderings of such media, both on standard AND HD displays.
In this particular case Dynamik will use your “Retina-Ready” logo image (selected below) to provide such a solution. Please note that your HD logo image should be a version of your logo that is exactly twice the dimensions as your standard logo (selected in the “Logo Image” drop-down). So if your standard logo image has a dimension of 250px by 100px then your HD version should be 500px by 200px.
Dynamik will then add the proper CSS code to scale this HD logo to fit the same space as your standard logo, but in a way that will look nice and clear on HD displays. Note that this is fully Internet Explorer 7/8 backward compatible. Also note that the larger HD logo will only be used on HD displays, with your SD logo image being utilized in all other cases.
Naming Convention #
A pretty standard way to name your two logo images when including one standard definition version and one high definition version is something like this: my-logo.png (for your SD version) and my-logo@2x.png (for your HD version).
Reducing Your Logo File Size #
Using an HD version of your logo image will increase its file size, but this can be effectively addressed by reducing the file size with online tools such as the sites linked to below.
