Hero image woes and those things :)

As I am putting the final spin on a client's website, I am really lost on the best way to implement large images in the background for the website without losing clarity in the image. I've read several dated post on this topic, however, I am not clear as the idea dimensions. For example, on my client's website, click here in the header you will see that I have an image; however, the client says the image isn't clear which I don't know how to handle. For that section of the website, I took that image and created a 2000x600 pixel header space but as you see the picture is slightly blurred plus it's a close up where as the client wants to see more of the image and less of his head. Any advice?


  • Denitsa
    • WordPress Warrior

    Hello Julius,
    I hope you are having an amazing day!

    Could you please provide us with a link to the page in question so we could see that? Thanks!

    Meanwhile, are you displaying the picture in its native resolution? As long as you serve at the native resolution it should appear in your website with the same quality as the original image. If you resize it (even by one pixel), then your browser will attempt to soften it which will give it a blurry effect.

    Looking forward to hearing from you!

    Warm regards,

  • Denitsa
    • WordPress Warrior

    Hello there Julius,

    I opened both your site and the image link in Firefox and Chrome and there is no visible blur due to browser resizing. I could see the picture itself looks blurry, so the only solution here would be to change it altogether. Also, since the head was on focus when the picture was taken you can't fix the rest, if that's what you mean by "see more of the image and less of his head", so that's not something that can be handled by HTML or CSS.

    Here are some screens to illustrate what I mean.

    -image itself (there's bit more of it because it needs scrolling, but the quality is visible nevertheless)

    Have a nice day!


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.