Blurry Header

  • Hi! I’m having trouble with my header being blurry no matter what I do. I have…

    • Reduced the image file size to 105kb.
    • Made it larger.
    • Made it smaller.
    • Made it huge and used the crop function.
    • Did not use the crop function.
    • Cropped it myself in different ways.
    • Used both .jpg and .png file types.

    I’m at a loss. I have no idea what else to try.

    Thank you in advance!

    EDIT: Also, the header does not fit within the mobile view. How do I fix that?

    • This topic was modified 1 year, 10 months ago by devonvesper.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter devonvesper

    (@devonvesper)

    Next edit: I also tried redoing the header at 300 DPI. It did nothing.

    Thread Starter devonvesper

    (@devonvesper)

    EDIT 3: I deleted the header and put my logo in the appropriate spot. I still need to know how to fix the blurring for the background.

    Hi @devonvesper ,

    Thanks for reaching out!

    I understand that you are experiencing issues with blurry images on your site, is this correct?

    Anytime a new theme is activated?or?image dimension settings are changed, old thumbnails need to be regenerated under?WooCommerce → Status → Tools → Regenerate Thumbnails.

    We recommend a minimum size of 800 x 800 pixels, width and height. This renders well for the main/featured image, catalog image and thumbnail image. Images that are larger are even better, especially if you’re selling items with great detail.

    Also, the general rule of thumb is that your image dimensions should match or be higher than those of your theme.

    Please can you work through the below support guide and see if any of the suggestions provided there help resolve the issue you are facing:

    https://docs.woocommerce.com/document/fixing-blurry-product-images/

    Cheers!

    Thread Starter devonvesper

    (@devonvesper)

    WooCommerce → Status →?Tools?→ Regenerate Thumbnails

    This doesn’t exist in my backend. Tools has just about everything BUT Regenerate Thumbnails. The only things with a regenerate button are two options for tables: Regenerate the product attributes lookup table & Product lookup tables. There’s nothing in there about images at all.

    Saif

    (@babylon1999)

    Hello @devonvesper,

    This doesn’t exist in my backend.

    Is your site hosted with WordPress.com? :?)

    I also checked your header image but I can’t see any blurriness:


    Link to image: https://d.pr/i/TUF56W

    Here’s the original image for context: https://i0.wp.com/devonvesper.com/wp-content/uploads/2023/05/devon-logo-main-notbig.jpg

    Am I missing something? :/

    Look forward to hearing back from you.

    Thread Starter devonvesper

    (@devonvesper)

    Hi!

    No, my site is self-hosted. I’m running WordPress version 6.2.2. This is what I mean when I say that feature doesn’t exist in my backend. This is what I see:

    As for your screenshot and image, I took the header down so I could have a professional-looking site. I added a logo in the Site Identity area of the Customize panel. I formatted it with CSS instead so I could have a functional, professional site while awaiting an answer. I just need to know how to use the header function without my headers looking like I took my glasses off. This is where I changed from the header to the logo.

    This is what the header looks like. Note that this image is 1950 x 500 pixels, as it states is needed. I also:

    • Reduced the image file size to 105kb.
    • Doubled the size.
    • Made it smaller.
    • Made it huge and used the crop function.
    • Did not use the crop function.
    • Cropped it myself in different ways.
    • Used both .jpg and .png file types.
    • Tried both 300 DPI and 72 DPI to the same effect.

    I hope this makes it clearer. Thanks!

    Hi there @devonvesper

    It is difficult to note the blurry issue without actually looking at the header.

    I can confirm if you choose “Skip Cropping” for the logo or the header, the exact image is used. There’s no resize performed on it.

    However, as you are seeing the issue on your site, I suspect this may be due to the Jetpack Image CDN that you have enabled.

    Due to the Jetpack Image CDN, images may be resized, compressed and then served.

    I’d suggest testing it by disabling the Jetpack Image CDN under Jetpack > Settings > Performance.

    Let us know how that goes!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Blurry Header’ is closed to new replies.