Image becomes blurry after fade

  • Resolved Ulf G

    (@ulf-g)


    10 years, 1 month ago

    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).

    Thanks

    https://wordpress.org/plugins/ml-slider/

Viewing 10 replies - 1 through 10 (of 10 total)
  • matchalabs

    (@matchalabs)

    10 years, 1 month ago

    Hi Ulf,

    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.

    Regards
    Tom

    Thread Starter Ulf G

    (@ulf-g)

    10 years, 1 month ago

    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.

    matchalabs

    (@matchalabs)

    10 years, 1 month ago

    Odd, are you sure you’re not zoomed in on FireFox? It looks good to me.

    Try going to View > Zoom > Reset 🙂

    Thread Starter Ulf G

    (@ulf-g)

    10 years, 1 month ago

    I am an AMATEUR! 🙂

    Thanks again

    Thread Starter Ulf G

    (@ulf-g)

    10 years ago

    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.

    matchalabs

    (@matchalabs)

    10 years ago

    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:

    http://screencast.com/t/lLQPlaORI

    Definitely worth learning how to use Chrome Developer Tools. I’d be seriously lost without it 🙂

    Regards,
    Tom.

    Thread Starter Ulf G

    (@ulf-g)

    10 years ago

    Thanks! If you ever come to visit Stockholm, I’ll buy you a beer.

    matchalabs

    (@matchalabs)

    10 years ago

    Haha, thanks! 🙂

    Kitchenet

    (@kitchenet)

    9 years, 2 months ago

    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:
    http://kitchenet.be/essence/

    Hope someone can help me out.

    Kind regards,
    Hannes

    Kitchenet

    (@kitchenet)

    9 years, 2 months ago

    Hey everyone,

    The problem is already solved. A friend of mine did something with the html code. Think he rotated the images in the slider with 0.01% or something.

    Thanks!
    H.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Image becomes blurry after fade’ is closed to new replies.