How to fix a blurry image
I created this test landing page using bootstrap: http://ubersnap.netai.net
If you go to the site and look at the iPhone screenshot, you will see that you can hardly read the text on the screen.
However, if you just resize the browser window and enlarge the window to its original size, it will be 100% sharp.
Why is this happening? Is there a way to make the image sharp on first load instead of resizing the browser window?
The image is a GIF if it matters.
+3
source to share
2 answers
try this css to keep your image edges clear.
.crisp-edges {
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
/* IE (non-standard property) */
}
+2
source to share
You need to set up different images for different screens. There are many ways to do this, the easiest is to use media queries and have different sizes / versions of the same image.
Each code example posted on smashingmagazine.com:
/* default screen, non-retina */
.hero #cafe { background-image: url("../img/candc970.jpg"); }
@media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.hero #cafe { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.hero #cafe { background-image: url("../img/candc290@2x.jpg"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, non-retina */
.hero #cafe { background-image: url("../img/candc538.jpg"); }
}
0
source to share