oleeskild / obsidian-digital-garden

MIT License
1.36k stars 125 forks source link

Image compressed automatically #464

Open ChristinaHyh opened 1 year ago

ChristinaHyh commented 1 year ago

Digital Garden automatically compresses images from the Obsidian library. I'd like to ask how I can prevent the images from being compressed and instead use the original images from the library? Thank you

zanodor commented 1 year ago

I have usually medium sized images (say 1kb-750kbs) but the file sizes don't change.

ChristinaHyh commented 1 year ago

I have usually medium sized images (say 1kb-750kbs) but the file sizes don't change.

When I right-click to open an image in a new tab, I noticed the image URL becomes 'img/optimized/xxx-700.webp'. I don't want it to automatically compress the image. I don't know how to fix it.

zanodor commented 1 year ago

I only use png, jpg, jpeg. I had to convert non-animating gifs to jpgs as they don't seem to be supported. I don't know about your case, sorry.

dayne commented 1 year ago

I recommend closing this issue on this repo and re-opening it on the https://github.com/oleeskild/digitalgarden repo where the code relevant to image optimization for the website is actually located.

Note you probably should double check latest behavior by updating your site's template. Follow these instructions: https://dg-docs.ole.dev/getting-started/06-updating-the-template/

The optimizer code (or at-least part of it) can be found in the .eleventy.js https://github.com/oleeskild/digitalgarden/blob/479ab3c545761994c15953bad5e0658c5ca950a5/.eleventy.js#L18

Which looking at leads us to the 11ty image plugin library.

If I'm parsing things right you might be able to override in your digital garden repo this behavior by setting formats to auto

This you could do as a test of behavior in your own digital garden repos's .eleventy.js by commenting out the current default and setting the format to auto -- not sure if that will work as well as you want (since it won't be resizing images nicely to the template expectation for image width). But might be a good starting point to experiment. The change in that file will be around line 21 and would look something like this

  // formats: ["webp", "jpeg"],
  formats: ["auto"],

Try it out.

Either way I recommend looping back here and closing out this issue and re-opening a more descriptive one over at the right repo: https://github.com/oleeskild/digitalgarden

ChristinaHyh commented 1 year ago

I recommend closing this issue on this repo and re-opening it on the https://github.com/oleeskild/digitalgarden repo where the code relevant to image optimization for the website is actually located.

Note you probably should double check latest behavior by updating your site's template. Follow these instructions: https://dg-docs.ole.dev/getting-started/06-updating-the-template/

The optimizer code (or at-least part of it) can be found in the .eleventy.js https://github.com/oleeskild/digitalgarden/blob/479ab3c545761994c15953bad5e0658c5ca950a5/.eleventy.js#L18

Which looking at leads us to the 11ty image plugin library.

If I'm parsing things right you might be able to override in your digital garden repo this behavior by setting formats to auto

  • formats: ["auto"] (keep original format) "auto"`

This you could do as a test of behavior in your own digital garden repos's .eleventy.js by commenting out the current default and setting the format to auto -- not sure if that will work as well as you want (since it won't be resizing images nicely to the template expectation for image width). But might be a good starting point to experiment. The change in that file will be around line 21 and would look something like this

  // formats: ["webp", "jpeg"],
  formats: ["auto"],

Try it out.

Either way I recommend looping back here and closing out this issue and re-opening a more descriptive one over at the right repo: https://github.com/oleeskild/digitalgarden

Thank you for you kind reply. I will try.