Images look a bit fuzzy on site |
|
Joel Rea
|
The usual cause of this is the image being displayed at a size other than its actual pixel size. To test for this, it depends on your browser, but basically right-click and view either the image properties, or, in Firefox, drag-select the text around and including the image then right-click and tell it to “View Selection Source.” In the Image Info or Properties, some browsers will show both the actual pixel size of the image, and its displayed size.
If the image is being displayed in an <img …> tag instead of as a CSS background-image in a <div …> or <button …> or some such, it likely has a height and width set. Make sure that those either match the actual dimensions of the image file in question, or else are a whole multiple of that size (usually 2× both dimensions for “retina-quality” images).
For instance, if you have an icon that is 32×32 pixels square, and the generated code is telling it to display at, say, 35×37, it’s going to be both blurry (or jaggy in older browsers) and slightly distorted in its aspect ratio (wider than it should be in this case).
If you had a 64×64 version of the icon and displayed it as 32×32, that would make it “retina quality,” though this isn’t as good a practice as it was only a couple years ago: newer, higher-res devices now have pixel scaling factors other than 1× or 2× (for instance, the newer Samsung and LG phones have 3×, and some devices even have non-integer scaling factors such as 1.7×!).
The only way to guarantee that a logo or icon or other such non-photographic image will always be sharp in any browser is to make it a Scaleable Vector Graphic (SVG, .svg or .svgx file) instead of a bitmap. Unfortunately, certain old browsers (ahem: IE prior to IE9 [IE8 was the last version to work in WinXP, which, despite its expiring this year, is still used in many enterprises and embedded devices] and Android Browser prior to 4) don’t support SVG at all without resorting to tricks, and some that do support it don’t support it completely (Android Browser 4 prior to KitKat doesn’t support masking in SVG).
How might an image be displayed at the wrong size? The usual way this happens is if either the theme hard-codes the dimensions regardless of what the actual image dimensions are, or if you replaced an existing image with another image file (either simply overwriting an image in your storage, or uploading a new one and changing the URL of the image src to point to the new one) and forgot to change its displayed height and width to match those of the replacement image.
|
| |
|
|