Image resolution problems on Snap theme

  • Author
    Posts
  • #3032102

    Hi there

    I have been using the Snap theme on my blog for a few years and have recently noticed that some of the images seem to be slightly fuzzy or pixelated and I cant figure out why as I haven´t changed the way I resize images or the way the blog is set up in ages… it seems like this started happening out of the blue and I can´t figure out how to fix it.

    Using the customise CSS feature, I have set the media width to 820px and have been uploading images resized to that exact width at 72dpi. I started to notice this fuzziness and began uploading larger images, which seems to make it better but then slows down the page load time.

    This is an example of larger images (994px) that don´t look fuzzy: https://piteiraphotography.com/2017/06/15/neha-jacob-hindu-wedding-in-portugal/

    and on this page the images are 820px and look soft, particularly the ones where there are 2 verticals side by side: https://piteiraphotography.com/2017/09/15/teo-ziggy-a-destination-wedding-in-portugal/

    Since the width is supposedly fixed at 820px, what am I doing wrong? Should I be using a higher resolution than 72dpi? I would really like to sort this out to maximise page loading time and larger images isn’t really the ideal solution… hence my cry for help!

    Thanks in advance. <3

    The blog I need help with is piteiraphotography.com.

    #3032267

    jessestu
    Staff

    Hi @kerrymurrayphotography,

    First of all, your photography is stunning.

    Second, I’d like to start the troubleshooting thinking about the 72 dpi. When I load this on my normal-resolution laptop screen, the pictures look excellent. Crisp, with perfect sharpening right on the edge of creating the moiré pattern. They’re really great.

    Then, I loaded the page on a high-resolution screen (Retina iPad mini in my case). On that screen, they look soft, without great detail. All images not formatted for a high-dpi displays will do this, which has complicated web site design over the past few years. People that care about their page load times run into a lot of performance balancing acts with this, because it’s standard now to load an image twice as big for a high-resolution device (well, technically, “responsive” designs at their best only load the image size needed for the device).

    That’s also probably why your compressed image, the 994px one, looks better to you: your device can show you all 994 pixels in the same space that your CSS is “fitting it” into 820px.

    One way to test my DPI theory is to upload and post a test image at 1,640px (twice the regular size). When you see it published, the browser will shrink it to 820px because of your CSS code. If you have a high-DPI device, it will strike you by how crisp and sharp it looks.

    Get back to us with your results and we can talk about next steps if that’s what’s happening. I could be wrong.

    Best,
    Jesse

    #3032337

    Hi Jesse

    Thanks so much for your quick reply and for your kind words about my images!

    I have done as you suggested and uploaded an image at 1640px and as you suspected, the image does look crisper. I didn´t realise that my Mac Book Pro was a high-DPI device as I´ve had it for years and only recently started noticing this fuzziness issue. Maybe I just wasnt paying close enough attention before? Here is the image: https://piteiraphotography.com/test-page/

    So where to from here, what do you suggest I do? Are there other things I can do to compensate for the inevitable page load delay that larger images will cause? Since it seems like larger images are the way forward from here.

    I look forward to your feedback and thanks again!

    #3032345

    jessestu
    Staff

    Hi Kerry,

    I suspected WordPress would automatically serve the appropriate image based on this image optimization page: https://en.support.wordpress.com/media/image-optimization/

    I tested it on your picture and it looks like its serving pictures appropriate for the screen: a lower-resolution one to my laptop and the high-dpi one to my iPad. It also serves a smaller one when I test loading it on a phone-sized screen.

    So, if you’d like those high DPI images on your site, I think you’re good to go simply by doubling your image size as you have done in your test post for future pictures. Even if you future-proofed your images by uploaded, say, 3x the 820px displayed size, WordPress will serve the appropriate size for the browser loading the page. That’s a good option as long as you’re not burning through your storage space.

    Let me know how else I can help!

    Best,
    Jesse

    #3032347

    Thanks Jesse

    So by doing that, I wouldn´t be slowing down the page loading time because of the larger images? If so, then this is what I will do for future posts.

    Thanks again for all your help!

    #3032349

    jessestu
    Staff

    As far as I understand, it should not slow the page load time down anymore than an image twice as large already would.

    Happy blogging!
    Jesse

    #3032350

    @kerrymurrayphotography, I can confirm what @jessestu says, the page loading times, if affected at all, would be very minimal, and for best display on Retina, or other hi-res screens, making the image twice the recommended is common practice throughout the web.

    #3032359

    Ok, thanks to you both! From now on I will use double sized images.

    #3032361

    You are welcome.

The topic ‘Image resolution problems on Snap theme’ is closed to new replies.