Image Quality

  • cleeannsmith

    (@cleeannsmith)


    5 years, 1 month ago

    I am having trouble with the image quality of some of my media on my WordPress site. When I add the image block into the page editor, the quality looks great – just like the original photo I uploaded. But, when I preview the page and view the image, it looks very blurry and not at all what the original quality is. I’ve tried changing all of the image size attributes in the block editor, but it is still being resized. It seems to only be happening with full-width images and the cover (background) images.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Davood Denavi

    (@binarywc)

    5 years, 1 month ago

    Your images might not be the correct dimensions to allow for full-width use. That will vary depending on your themes settings for what is considered full width.

    Also, it might be possible that WordPress is not resizing your images correctly… in this case, you may need to use a plugin like Smush from WPMU Dev https://ww.wp.xz.cn/plugins/wp-smushit/ to fix the problem you are having.

    I hope this helps you fix the problem.

    Thread Starter cleeannsmith

    (@cleeannsmith)

    5 years, 1 month ago

    @binarywc Thanks for the reply, but I think I’ve nailed down the source of the issue. It seems that WordPress has some automatic responsive image stylings that set the image width at specific viewport widths. For example, the one that’s causing mine to look blurry is this query:

    sizes=”(max-width: 640px) 100vw, 640px”

    Is there any way to override these settings? The issue doesn’t happen when I hardcode the image into the page’s php file, but I would like to be able to easily replace the image in the block editor without touching the theme editor. I tried to add my own “sizes” attribute in the html in the code editor, but I get an error message saying “This block contains unexpected or invalid content”.

    • This reply was modified 5 years, 1 month ago by cleeannsmith.
    Davood Denavi

    (@binarywc)

    5 years, 1 month ago

    You are having an image compression issue. Different themes handle the images differently, overriding the image settings can be done in the theme. You will definitely need to contact your theme developers for support. Also, the plugin I mentioned will definitely help you resolve some (possibly even all) of the issues you are experiencing too.

    If you are hardcoding things into the themes php you need to make sure you are using child themes. You can learn more about child themes here: https://developer.ww.wp.xz.cn/themes/advanced-topics/child-themes/

    Thread Starter cleeannsmith

    (@cleeannsmith)

    5 years, 1 month ago

    Ok, I’ll give the plugin a try. I see the option where it says “Resize my full-size images.” and that sounds like the solution I need, but when I enable it, the full-width images are still blurry.
    Also, I am the theme creator – I used understrap as a base theme to create it. I’m still very new to WordPress development, so I’m just trying to figure everything out.

    Davood Denavi

    (@binarywc)

    5 years, 1 month ago

    If you used unstrap as the base theme then you are not the developer of the theme… you need to contact their support community. https://ww.wp.xz.cn/support/theme/understrap/

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

The topic ‘Image Quality’ is closed to new replies.