Image quality problems

  • klaudia18

    (@klaudia18)


    8 years, 3 months ago

    Hello,

    I would need your support regarding the image quality on our Blog.
    There is a huge difference how the quality appears directly on the Blog link (per topic) and how it appears on the blog site where all the blog posts are available.

    Please see below the links for the differences I am mentioning
    Blog Posts: https://aiso-lab.com/blog-en/
    Specific Blog Post: https://aiso-lab.com/handelsblatt-ai-conference/

    Could you please support me how to avoid this problem for future purposes but also to improve the quality of all the previous blogs?

    Thank you very much in advance

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • paulwpxp

    (@paulwp)

    8 years, 3 months ago

    The problem is not how WP processes jpg resulting in dropped jpg quality, this is another issue but it doesn’t really require a fix because the effect is very little.

    The real problem is your theme pulling a small size image and forces the browser to display it in bigger dimension.

    This is image url from post listing (archive) page, it’s a small size
    KI-Konferenz-München-300x99.jpg

    and it’s being shown in 814 px wide

    
<img class="wp-image-1149 aligncenter" src="https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-300x99.jpg" alt="" width="814" height="268">

    This is the image used in single post page which is bigger
    KI-Konferenz-München-1024x336.jpg

    and it’s being shown with all the WP image code to ensure the proper sizes for all devices

    
<img class="wp-image-1149 aligncenter" src="https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-300x99.jpg" alt="" width="814" height="268" srcset="https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-300x99.jpg 300w, https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-768x252.jpg 768w, https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-1024x336.jpg 1024w" sizes="(max-width: 814px) 100vw, 814px">

    So to fix this issue, we need to fix the code in your post listing (archive) template, just use WP standard way of pulling the image. See code examples in any default WP themes.

    Mr Case

    (@mr-case)

    8 years, 3 months ago

    when you upload images to WordPress media library, several image sizes get created. Usually the original size, a couple smaller versions and a thumbnail. Chances are your theme is setting one of the smaller sizes for the posts page and your CSS is making that small image very large, so it looks pixelated. I can’t say exactly how to correct this issue in your particular case with your particular theme, but that is most likely what is happening.

    see your different image sizes below

    https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München.jpg
    https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-300×99.jpg
    https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-768×252.jpg
    https://aiso-lab.com/wp-content/uploads/2018/03/KI-Konferenz-München-1024×336.jpg

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Image quality problems’ is closed to new replies.

Tags