I've created a twitter background button using background image:
html:
<span class="twitterSocial"><a href="#"></a></span>
To cope with retina display screen, I made the original background image slightly bigger (64px by 64px) and reduce the size using css background-size. The image display in chrome is sharp but in Firefox the image looks blur, even though I've made the image slightly bigger....
css:
.twitterSocial a {
background: url("http://oncorz.com/ci/css/newTheme/images/twitter_icon.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
display: block;
float: left;
height: 39px;
opacity: 1;
transition: all 0.4s ease 0s;
width: 39px;
}
This happens because of the way browsers shrinks images to fit the sizes defined in the CSS. If you change to 32px or 40px, it will look slightly better. I guess 39 is a bad number because it doesn't derive well from 64.
Changing image size using CSS may cause this problem and it's always best to display images on their true sizes. Either create a set of images (or a sprite of such set) for every display you support, or use vector images, such as fonts.
My advice is using fonts instead of images. Not only it loads faster and takes less requests from the server - it also looks great on virtually any size, because they are vector graphics.
I use FontAwesome and it has over 400 icons as fonts (twitter included). They really are awesome :)