Photo Post - Original Size

[roughnecks]

Hello,

is there a way to have photos posted in original size, instead of full size to fill the blog post? I have some GIFs that looks grainy because of the bigger size.

Thanks

[xenocrat]

Most of the themes have a style rule like this:

section img {
    display: block;
    width: 100%;
}

For example, Blossom has that rule here. If you change width: 100% to max-width: 100% images will be displayed in their original size but never bigger than the containing post.

[roughnecks]

Thanks, I changed the topaz stylesheet like this:

section.photo img,
article.archive img {
    max-width: 100%;
}

because the section img was already at max-width

[roughnecks]

Hello, excuse me if I write again here, but I can't explain this:

for a couple GIF posted like photo it worked just fine, example: https://blog.woodpeckersnest.space/2023/10/12/roughnecks/and-now-with-clean-urls/

now I made a photo post with a .jpg and it looks like this: https://blog.woodpeckersnest.space/2023/10/17/roughnecks/top-five-processes-by-ram-usage/

I haven't touched the stylesheet apart from the modification in the previous message.

Do you have any idea? Thanks :)

[xenocrat]

What problem are you seeing?

[roughnecks]

Well, the original image is smaller that what shows on the post.. If you click it, you'll see in the lightbox its real size.

[xenocrat]

I see now, thank you. The srcset and sizes attributes of the img tag are causing this. The MDN article explains how they interact.

I will make some changes so that you can disable this behaviour in the template file. In the meantime you can link to the uploaded image directly to work around the issue, using the Text feather instead of the Photo feather.

[roughnecks]

Alright, thanks, I'll keep in mind for the next post!

[roughnecks]

Hello, made another Photo post with another GIF and it's still not working.. I don't understand what's different from my previous posts where the GIFs are posted in original size, after I changed the stylesheet.

[xenocrat]

I would guess it’s the same issue as above. The thumbnail behaviour is designed to reduce potentially very large images for reduced bandwidth delivery, so it offers a master image at a width determined by the theme (usually about 1024px), plus a further series of reduced size options as a srcset. The set offers reduced sizes of 320, 640, and 960 pixels wide, in addition to whatever the master specifies. If any of these requested sizes is larger than the original image, the original is served instead of rendering the reduced size option.

Because of the poor compression characteristics of GIF, most GIF files are less than 320 pixels wide and therefore the original is served in all circumstances. But if your GIF is wider than that, a reduced size option could be served instead. This will be most noticeable for animated GIFs, because the animation will be removed from the reduced size options.

I’ve improved control over this behaviour for the next release. In the meantime, if you want to solve it right now whilst still using the Photo feather - especially for large animated GIFs - you can change the image display code to:

{{ post.filename | uploaded }}

This will link directly to the original uploaded file without any attempt at bandwidth reduction. Beware that this requires you to be cautious when uploading images, otherwise a very large image could cause your site to perform poorly for some visitors.

[xenocrat]

Hello again,

An update: I have made quite a few changes to how image source sets (srcset) in general, and animated GIFs in particular, are handled by Chyrp Lite. I've added some code to detect and treat animGIFs differently, and I've fixed a few bugs in the code that detects when an image is being upscaled. The upcoming release should behave much better in the situations you have encountered. Thanks for raising the problems - this helps me to know where I should focus my attention!

[roughnecks]

No problems, glad it's fixed!