Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1054096

    Hi,
    I am trying to show the featured image on the mobile for single blog posts.
    I found this post: https://kriesi.at/support/topic/featured-image-not-displaying-on-mobile#post-717276 which does make the featured image to show.
    However, when testing it on my desktop, the quality of the featured image seems to be very low.
    How can i increase the featured image resolution on mobile pages?

    Thanks

    • This topic was modified 5 years, 5 months ago by wzshop.
    #1054265

    Hey wzshop,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1054570

    Hi,
    Sorry for the late reply. I have been studying a lot about srcset and sizes property in the img tag;), just so I am able to understand what is happening.
    See the private content URL. The thing is that normally the thumbnails/featured images are hidden when on mobile devices (setting Single post with small preview image). Therefore the sizes attribute in the image tag is set to (max-width: 180px) 100vw, 180px, meaning the shown thumb on screensize between 180 and the mobile screen setting (768px default) is max 180px. Therefore the quality is too low. Removing the sizes attribute or changing it to (max-width: 180px) 100vw will collect the image that the best quality for the users viewport.

    -Since I am still quite new to this, I really like other thoughts on this issue.
    -Also, what is the best way to make these adjustments in the Enfold theme.
    -Also, the reason why Enfold coded it like this, is to make sure to not download a big image when the users viewport is large, since only a thumbnail needs to be shown (normally, without the custom CSS changes). Correct?

    #1055927

    Hi,
    Sorry for the late reply, I have taken a look at your page and I see the attribute “(max-width: 180px) 100vw” in place and it seems the 450px image is showing. So I assume you have made this change already?
    Is there anything else we can assist with on this issue?

    Best regards,
    Mike

    #1055965

    How is that an answer?
    It is showing an 450px image (maybe) but the quality is 180px. That is why the image is all blurry. The enfold behavior is good, for normal circumstances, but as I want to show the featured image on small screens as well, the shown image is of too low quality.

    #1055969

    Hi,
    Sorry, when I look at the image it looks to be good quantity, did you see the screenshot I included? It’s not blurry for me in Chrome or on a Android mobile.
    Which browser / device are you using?

    Best regards,
    Mike

    #1055970

    Just desktop, windows 10, chrome 71.0.3578.98
    Image seems to be low quality. Try deleting the sizes attribute in developer mode. The quality of the image should increase, which is the quality i like.

    #1055978

    Hi,
    I tried removing the sizes attribute, but I didn’t notice a change, but since you did, try adding this code to the end of your functions.php file in Appearance > Editor:

    function remove_sizes(){
    ?>
    <script>
    (function($){
    $(document).ready(function(){
    $('img').removeAttr('sizes');
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'remove_sizes');

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.