Poor image quality after upload

[konstantin-fi]

Hi!

Please guide me to a resource or simply help me understand why, when my site is uploaded to web, the post images become really bad quality. Take an example: https://raccoonbox.com/web-design/. Images which are wide have been uploaded to the site of, 2000px wide. The picture version I have on my computer is way sharpen than the one on the site. Then that dark full width image. That is a complete disaster!

What service is scaling down the images and how to adjust it not to be so pixel hungry? I feel like my images are half-eaten when I publish my site.

Thank you!

[internettips]

The 2 wide images on the home page of https://raccoonbox.com/web-design/ I checked were 768 pixels wide -- which of course is not wide enough for a full screen display. Maybe check the images again.

[candidexmedia]

Try disabling the Responsive Image Quality option in your Site Settings, or changing the percentage to 100%.

I had the same issue, and that resolved it. Just make sure you are optimizing/compressing your images with tools like Squoosh and TinyPNG.

Otherwise, look into whether your server of choice is running image compression.

[raccoonbox]

For image optimizing, I use ImageOptim. I have found it very good.

Thank you for pointing out that the image was 768px and also telling me about the Responsibe image Quality setting. Disabling it solved the issue of low res images. Still, I would like to have responsive images and I think the solution would be to add code so that the site would push the original when the screen size is big enough, as right now it looks like the site is stuck on the "md" version.

Where can I find documentation to modify "responsiveImages" section and to add more break-points after "md" like large, extra-large, full-width?

I will attach a screenshot!

[candidexmedia]

Where can I find documentation to modify "responsiveImages" section and to add more break-points after "md" like large, extra-large, full-width?

@bobmitro Would it be possible to add a doc page for this?

[bobmitro]

https://getpublii.com/dev/how-images-work-in-publii/

[internettips]

@raccoonbox

What I've found is that if you're using one of Publii's well-designed themes, providing the source images are sufficiently larger (wider but in proportion for height too of course), during the rendering process, Publii will automatically create all the various images needed for the theme at the right sizes and aspect ratios. Plus, if your theme has image compression settings and you've previously chosen those, that too will be applied (though if you don't, I think Publii will apply default image compression anyway).

So the end result, should be images right-sized for whatever purpose they need to be and mostly optimized for the web. Though I too have used ImageOptim -- sometimes it can almost cut too much.

In the Publii Developer documentation, there's a great page primer on how images are used in Publii: https://getpublii.com/dev/how-images-work-in-publii/ . Hope that helps.

[konstantin-fi]

I thank you for your help which will help me solve this issue.