low image quality

  • Resolved gangakitose

    (@gangakitose)


    4 years, 3 months ago

    Dear Support,

    We’ve added high-quality .jpg images but they seem to come out very low in quality. On our PC the images look better than what the animation shows. We are using Elementor btw.

    Here Is the Link(https://thegangagame.com/scrollsequence/gangaturns/) with the animation, we would be very grateful if you could help us.
    The pictures used for this sequence are normally in 4k and then rendered down so they don’t slow down the website. But they still look much better in this version than the animation right now.

    Thank you!

    • This topic was modified 4 years, 3 months ago by gangakitose.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Scrollsequence

    (@scrollsequence)

    4 years, 3 months ago

    Yes, there is a known phenomenon with painting a larger image on a smaller HTML5 Canvas. See article below and documentation where the topic is described. Also I recommend using maximum fullHD image size – if you use bigger, performance drops significantly on some devices.

    From Documentation
    When a big image is resized to a smaller size, the resizing may not be as clean as one would expect. Please find article below that describes this problem

    https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

    Basically, if the image is downscaled in one step, there may be reduced quality. To overcome this problem, the downscaling needs to be done in multiple steps, drawback is that each image may take a few hundred milliseconds for each image to downscale in multiple steps. Not good for a smooth animation!

    Solution: There is a special javascscript file with added multistep downscaling step added after the scroll is finished. ie: When the user is actively scrolling, downscaling is done in a single step = good performance. Once the scroll finishes, the very last image is then re-scaled using the multistep downscale technique = better quality.

    To apply this script, find the ssq-lib__premium_only.js backup and replace it with the ssq-lib-polish__premium_only.js

    Please note that this experimental feature is available only in premium versions.

Viewing 1 replies (of 1 total)

The topic ‘low image quality’ is closed to new replies.