Okay
  Public Ticket #2073191
Image quality
Closed

Comments

  • Michael started the conversation

    Hi,

    I just bought the theme because the demo looks so very promising.

    I am about to setup my page. I noticed that all of my main images in the full-screen slider look heavily compressed. I used high quality images in 2500px and 2000px width. Is there an option to turn off the compression?


    Thanks

    Michael

  •  1,974
    Support replied

    Hello Michael,

    The standard we use is to have 1600px width for full-width images and 800px width for thumbnails

    This is roughly the average width for images.

    If you are using Adobe Photoshop, save images with 60% quality.

    Let us know if you have any other questions.


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Michael replied

    so my images are too big?

    I use 80% compression because I need them to remain in high quality. Now it looks kind of downsampled.

    Any idea?

  •  1,974
    Support replied

    Please provide us your website url. Thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Michael replied privately
  •  1,974
    Support replied

    It looks fine on my desktop. What monitor and resolution do you use?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Michael replied privately
  • Michael replied

    On my page you can clearly see the compressed quality of the images.

    Interesting is: the fullscreen slider is super compressed, once you click on a portfolio project the background hero image is getting better quality (but not the full quality).

    And there seems to be a black overlay on the hero images.. 

    .black-overlay .item-caption {    display: none;
    }

    is not working here..! Any help?

    For me as a photographer it is very important to show high quality. The MacBook Pro retina display is kind of a standard regarding resolution. So it has to work here. 

    I would really appreciate if you have a solution me.

    Thanks.

  • Michael replied

    Support?

  •  1,974
    Support replied

    On a mac you have 2,560×1,600 resolution size. You have used 1600 x 1068 images sizes in the slider. Try to use bigger images but save them for web in photoshop

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Michael replied

    Thanks for you reply, but in my first post I wrote I already tried 2500px images with the result that they are downsampled. And there is a black gradient on top of the hero slider..

  •  1,974
    Support replied

    Remove this from showcase.css at line 82

    .section-image::after {
        content: "";
        width: 100%;
        height: 60%;
        position: absolute;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
    }


    Please verify your browser if the zoom is 100%


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Michael replied

    Thanks. The black gradient comes back after clicking on a project :) what can we do here?

  •  1,974
    Support replied

    Remove this also from style.css at line 1839:


    #hero-bg-image::after {
        content: "";
        width: 100%;
        height: 60%;
        position: absolute;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
    }


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Michael replied

    Great! Thank you.

    I am testing with different image sizes, let`s see what works best.

  •  1,974
    Support replied

    Ok Michael

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Michael replied privately