Hi judyback!
[anonymous] wrote:
I’ve got .jpgs throughout my site and when I recently experimented with a different theme they all got mangled and are now displaying in very poor quality.
In terms of the mangling, try one (or all) of the following:
- In Publii, go to the “Tools & Plugins” menu option on the left and select “Regenerate thumbnails”. See if that helps at all.
- Go to “Site Settings” > “Website Speed” and turn off “Enable Responsive Images” (or play around with the image quality %). You’ll have to regenerate the thumbnails.
- If you kept responsive images on, try enabling “Convert to webp” — note: although webp “offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc.” (source), webp isn’t supported in Internet Explorer.
- If none of these work, and you haven’t enabled webp conversion — go to the App Settings (three horizontal dots at the top-right of Publii) and change the “Image resize engine”
[anonymous] wrote:
Is there any advice on the format (file types), quality and sizes of images to use?
In general: any advice you can find on best practices for web images can apply to Publii as well. Mozilla’s MDN docs have a great guide on image file types and formats. You can also find tons of guides and cheat sheets on suggested image dimensions and sizes to optimize for load speed. I know that one rule I learned in the past was doubling the desired image dimensions for retina screens, but I’m not sure if that’s still relevant in 2023. Consult multiple sources and decide from there.
Another thing for size: I’ll typically run my images through image compressors like Squoosh and TinyPNG to ensure that the size is the smallest it can be without compromising quality.
You can also run speed tests on your pages to ensure that the image sizes are don’t affect your load speed.
[anonymous] wrote:
Also, do I have to crop and use different image files for when an image is used in content and when it is used as a featured image (and typically enlarges the least interesting part of the image)?
This depends on the theme you’re using and images you have. Sometimes, it’s a cropping thing, and sometimes, it’s a matter of tweaking the CSS. If you have a live demo we can take a look at, that would help. 😀
