Ask HN: Static website generation with large number of images?

[seanwilson]

I'm looking into creating a static website using something like Hugo or Jekyll that has about 1GB of images hosting on something like Netlify:

- For each image, I want to automatically generate mobile, tablet and desktop sizes, and also optimise each image with tools like pngcrush.

- I want an easy to use CMS interface like Netlify CMS to edit content.

- Deploys should be fast. Correcting a typo and having the fix deployed shouldn't take long.

What approaches are there to doing the above where image generation doesn't slow everything down? Can generated images be cached somehow between builds? Can generated images be automatically committed to Git somehow when a new image is uploaded? Is it better to use a web service to generate and serve the optimised images on demand?

[dhruvkar]

I used a combination of Hugo, Python script and a separate Netlify site to serve ~1k images.

The python script cropped, resized and optimized images.

Hugo generated a simple image site with an API-like url schema that could be consumed by my main, also Hugo, site using the getJSON function.

Do the images change frequently, or is the situation more one and done?

[seanwilson → dhruvkar]

Thanks! Interesting...why did you separate the images from the main site like this? What was the site for?

Also, doesn't Netlify change your image URL names each deploy for cache busting reasons? Doesn't this cause problems?

> Do the images change frequently, or is the situation more one and done?

I'm thinking of something like a standard WordPress blog site with lots of images so infrequent changes.

[dhruvkar → seanwilson]

>>why did you separate the images from the main site

I anticipated using the images in more than one place at the time, so wanted an API-like interface.

>>Netlify change your image URL names each deploy

I have not run into this. My images don't change much either, so not redeploying very much, but have had no issues with URLS changing on me.

[seanwilson → dhruvkar]

Hmm, what I should have said is I think Netlify modify image filenames to do cache busting on deploy so I'm guessing old image filenames eventually get discarded. As long as you're only relying on fairly recent image filenames from your API it shouldn't be an issue.

[sgallant]

Have you considered using a service like Cloudinary.com, imgix.com or github.com/thumbor/ (open source) for image transformations? IMO, they're a much better way to handle variations of your images.

[seanwilson → sgallant]

I've looked at them briefly but I'm worried about vendor lock-in and unpredictable pricing. The pricing one is a big aspect if I'm wanting to sell something to a client as the pricing needs to be simple and predictable. Any thoughts?

Also, how well do these work with source control? I like having everything under source control for easy reviews and rollbacks.