Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Basic, basic image information

  • This topic has 2 replies, 2 voices, and was last updated 5 months ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10546
    Avatar photojudyback

    Hi,

    I’ve read the documentation on images, but I need something more basic than that. Is there any advice on the format (file types), quality and sizes of images to use? 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. Would it help to be using a different file type? Are there some standard sizes and quality attributes that will ensure all images look good? 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)?

    #10569
    Avatar photocandidexmedia

    Hi judyback!

     

    judyback 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:

    1. In Publii, go to the “Tools & Plugins” menu option on the left and select “Regenerate thumbnails”. See if that helps at all.
    2. 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.
    3. 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.
    4. 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”

     

    judyback 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.

     

    judyback 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. 😀

    #10616
    Avatar photojudyback

    Thank-you so much. That is all really, really helpful. I will dig through the suggestions and resources!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.