Front page feature image is blurry in Sela

  • Unknown's avatar
    tastytabloid · Member ·

    Hi there,
    I am trying to use Sela theme for my website. It says that featured images should be at least 1180 in width. When I try making my featured image for my “front page” one that is 1444px wide, it displays blurry. I compared it to the image file opened on my computer zoomed in to be the same size as the website, and it is not blurry there. I feel like the theme is resizing the image to be smaller and then blowing it up bigger again or something. When I edit the page, under “Template” I have “Front Page” selected. Can anyone help figure out how to display the featured image on my “front page” so that it is not blurry?
    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    musicdoc1 · Member ·

    I am trying to use Sela theme for my website. It says that featured images should be at least 1180 in width. When I try making my featured image for my “front page” one that is 1444px wide, it displays blurry.

    Has this occurred on multiple images, or one one particular image? It’s difficult for the volunteers who typically respond first to topics posted here to diagnose the issue without access to the website (marked private) or the image in question.

  • Unknown's avatar
    tastytabloid · Member ·

    Hi, musicdoc1 – it has occurred on every image I’ve tried to put up on the front page. Sorry – my page is public now. I wanted to put up more content first. :-p

    Another problem I’m having is that the header image doesn’t scale down when the site is viewed from a smartphone (or at least in the simulation available, it doesn’t. I don’t actually have a smartphone to test that out personally.)

    Thanks.

  • Unknown's avatar
    designsimply · Member ·

    The theme uses automated cropping functions in WordPress.com to change the size of the image. The quality of the image will change slightly because of this. It’s more noticeable in some images compared to others, and it looks like because you’re using an image with text in it and lines on a graph, the compression will be more noticeable with that type of image. There is not a way to change how this works.

    One possible workaround solution in your case might be to size the image as close possible to match the width exactly for a few different break points (i.e. desktop, tablet, and phone) and replace the image manually with custom CSS. It’s not a perfect solution, but it might work. Also, it requires a purchase because CSS editing is only available if you have on of the WordPress.com plans:
    https://wordpress.com/plans

    If that sounds like something you might be interested in trying, let me know and I can work out an example so you can see the effect.

    If you are not interested in the plans or in trying custom CSS, then you will be limited to the auto resizing and how it affects image. We try to strike a good quality with them but also need to consider compression and space and bandwidth. Most often, people use photographs as header images and those will work better with the resizing. A line drawing or crisp lines in detailed text inside an image will always look a little blurry after being resized. This would happen regardless of how WordPress.com image resizing works on mobile because the image has to shrink somehow to display it there anyway and the same problem happens. You can see what I mean by opening the image https://tutorwithcressa.files.wordpress.com/2015/01/bessel-funcs.png directly in a browser and then making the browser width smaller.

    Another problem I’m having is that the header image doesn’t scale down when the site is viewed from a smartphone

    I tested from my iPhone and the image scaled properly in my test.

  • The topic ‘Front page feature image is blurry in Sela’ is closed to new replies.