WordPress.org

Forums

Meta Slider
[resolved] Image becomes blurry after fade (11 posts)

  1. Ulf G
    Member
    Posted 1 year 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/

  2. Matcha Labs
    Member
    Plugin Author

    Posted 1 year 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

  3. Ulf G
    Member
    Posted 1 year 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.

  4. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

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

    Try going to View > Zoom > Reset :)

  5. Ulf G
    Member
    Posted 1 year ago #

    I am an AMATEUR! :)

    Thanks again

  6. Ulf G
    Member
    Posted 1 year 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.

  7. Matcha Labs
    Member
    Plugin Author

    Posted 1 year 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.

  8. Ulf G
    Member
    Posted 1 year ago #

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

  9. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    Haha, thanks! :)

  10. Kitchenet
    Member
    Posted 5 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

  11. Kitchenet
    Member
    Posted 5 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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Meta Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic