search

nusserstudios / tailbliss

TailBliss is a Hugo Starter theme built on TailwindCSS 3, and Alpine.JS.
https://tailbliss.netlify.app/
Apache License 2.0
314 stars 146 forks source link

Image processing #132

Closed ElastiCourse closed 1 year ago

ElastiCourse commented 1 year ago

Hi Jeremy,

Thanks for such great responsive theme. I'm about to submit a PR of some minor issues I found as I developed with this theme.

I have some issues with image processing and paths. First, I noticed all images are pixelated and of lower quality in post content, featured image and even homepage p1,2,3.. etc images Example

Take step 2 as example from the example. The original image in png format is 36kb using imgc shortcode {{< imgc src="gns3-platforms.png" alt="gns3-platforms" >}} it produces webp version at 14.5kb but looks really bad. imgc

native image code ![Stormtroopocat](/images/gns3-platforms.png "The Stormtroopocat") uses the original png 36kb, best quality native

native image code but using converted webp version using cloudconvert.com ![Stormtroopocat](/images/gns3-platforms.webp "The Stormtroopocat") optimized webp is sized 17kb, shows much higher quality than the imgc, and slightly lower quality than png but still acceptable native-webp

do you have any suggestions?

My second question is regarding paths, I'm using the release that has canonifyURLs: true, I have a hard time understanding how paths work with multiple image folders

take sample blog posts as an example, authorimage: ../assets/images/global/author.webp WORKS featured_image: /images/gns3.webp WORKS both the featured image and authorimage are in assets folder, but they are referenced in two different ways from post point of view at tailbliss/content/posts/x.md how could tailbliss/assets/images be referenced this way? I would have expected something like ../../assets/images/gns3.webp

then on the other hand the native image tag would only look in tailbliss/static/ then reference the internal path ![Stormtroopocat](/images/gns3-platforms.png "The Stormtroopocat") it also wouldn't support native image code for a file in the assets/images regardless

![Stormtroopocat](/assets/images/ova.jpg "The Stormtroopocat")
![Stormtroopocat](../assets/images/ova.jpg "The Stormtroopocat")
![Stormtroopocat](../../assets/images/ova.jpg "The Stormtroopocat")

Best,

nusserstudios commented 1 year ago

Use the static folder, you can serve them all up from that. Assets uses Hugo pipes image processing. I know, its confusing. I may just remove assets in favor of the static, just because it seems less confusing. Featured image and a few global images are served up from that. My apologies, but I've seen some confusion over this in the Hugo forums as well. Hopefully that helps.

ElastiCourse commented 1 year ago

I experimented with native image tags but they also have their drawbacks, they don't fill the container and lineup as imgc does

How about featured image, can you skip processing for it somehow? as I mentioned if I try to load a featured image from static folder it never loads

nusserstudios commented 1 year ago

It would be pulling the conditional statements and just using an image tag that looks right at static and applying a class of w-full h-auto. Just make sure you export images the size of the container. I'm using Astro for my site, and it's very similar to Hugo in that respect. I ended up moving all my media to an S3 bucket that serves up all my media.