My hires image looks super sharp and nice during the fade from the previous one. And then, when it’s fully loaded it kind of snaps to a blurry version. Have a look at the top slider at http://www.helikopterfoto.se (the slider whith the drone and the town roofs). If you switch between the two images manually it’s very obvious. Anyone knows something about this? I read something about 0,5 px offset in the CSS, but I’m not sure that’s the problem.
The error occurs on all sliders available in the options panel (Flex slider, Responsive and so on).
I don’t see the problem myself (in chrome) but it sounds like the browser is messing with the image. It could be because the slideshow is being displayed at 1080 x 311, but the image itself is 2000 x 576.
Please could you try changing the slideshow size to 1080 x 311? This should stop your browser from having to do any resizing/anti aliasing.
Wow! The images really look super crispy in Chrome. And after changing the slider size according to your suggestion, the “snap” to blurry is gone! However the overall sharpness is lower in Firefox, but that might have to do with window scaling – FF displays the page much more “zoomed in” and larger than Chrome.
Thank you Tom for your quick and helpful reply.
Odd, are you sure you’re not zoomed in on FireFox? It looks good to me.
Try going to View > Zoom > Reset 🙂
I’ll take the opportunity to make use of your helpfulness and ask yet another question. How did you reveal the actual display size of the slider? It seems like I have the same issue on the slider further down named Flygfoto, where the pics look blurry. The Flexslider is set to 600 px width, which seems so be more than the actual display width in the browser. Can’t find any clues in Show source code.
Hi Ulf G,
You won’t find any clues in the source code as the browser will adjust all the sizes responsively when you actually view the site.
I use Chrome Developer Tools (it’s part of google chrome). Here is how to use it to find the size of an element:
Definitely worth learning how to use Chrome Developer Tools. I’d be seriously lost without it 🙂
Thanks! If you ever come to visit Stockholm, I’ll buy you a beer.
Hey WordPress people,
I have the same problem as Ulf G. Some (sharp) pictures in the slider become blurry when they appear. In fact the problem is only in FireFox browser. In Chrome and safari the pictures are sharp. I crop the pictures in photoshop at 1660x1106px resolution:72
Here is a link to one of the slider problems:
Hope someone can help me out.
- The topic ‘Image becomes blurry after fade’ is closed to new replies.