[hansenzhang]

https://hansenzhang.com/

I finally put my photos up on my personal website. The only constraint I gave myself was to build a site that doesn’t need Javascript to load.

In the end I ended up using Next.js as a static site generator that pulls all the routes from my directory structure, making it possible to add new photography collections and filters as I go.

Might be overkill for the use case but it was fun to learn. The irony is I had to write a bunch of JS to produce it.

Still need to optimize the image sizes and I am thinking about adding filters for b&w/color/format.

[danielecook]

Looks great! I did something similar with hugo and tried to automate the process as much as possible.

I use a utility called jhead to resize, fix rotation issues, and rename photos by date - then I tied this to a folder action on macos so I can just drop photos in a folder and they get renamed and resized.

Then Hugo has this cool 'smart' cropping feature which tries to crop based on content [1] - and the end result is now all I do is drop photos in a folder and publish and it comes out looking pretty good [2].

1. https://gohugo.io/content-management/image-processing/#image...

2. https://www.danielecook.com/photos/

[hansenzhang]

Nice! I found Hugo about halfway through working on this and it seemed like a great solution as well. The jhead utility would save me a ton of time as I ended up cross referencing my negatives to find processing dates which is all in the metadata.

I ended up using sharp [1] since it was so easy to integrate into my workflow.

1. https://github.com/lovell/sharp

[galacticdessert]

Cool project! I set out to do something similar as well, but with a slight different scope. I wanted a web gallery that I can use to access all my (substantial) collection of pictures, that does not need any maintenance/work to get started. It lists directories and generates thumbnails on the fly, no database needed.

No JS would have been nice, but ended up making the content draw and re-flow in JS as I wanted to keep the aspect ratio of the thumbnails instead of showing a bunch of squares, for which a simple flexbox would have been enough.

I still have to write a decent README

https://gitlab.com/nicolazen/presto-photo-gallery

[mcny]

Pretty cool!

OP, have you tried loading="lazy" ? I don't know if it works with the picture tag but it is worth trying I think.

Very often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.

Loading attribute The loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.

https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...

For those on mobile and can't right click

<a href="https://static.hansenzhang.com/travel/places/2019-07-04-nort...

<picture>

<source srcset="https://static.hansenzhang.com/travel/places/2019-07-04-nort... type="image/webp">

<source srcset="https://static.hansenzhang.com/travel/places/2019-07-04-nort... type="image/jpeg">

<img src="https://static.hansenzhang.com/travel/places/2019-07-04-nort... alt="travel/places/2019-07-04-northcarolina-3-color.jpeg">

</picture>

</a>

I was curious about the picture tag. Here is what Mozilla documentation says https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pi... :

The HTML <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

To decide which URL to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The <img> element serves two purposes:

It describes the size and other attributes of the image and its presentation.

It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

Common use cases for <picture>:

Art direction. Cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).

Offering alternative image formats, for cases where certain formats are not supported.

Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the <img> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.

[hansenzhang]

Good point I hadn't thought of that. Still have to troubleshoot it a bit in Firefox but it looks like its working in Chrome.

The resolution scaling is a good idea as well. I used the picture tag initially as a fallback for browsers that don't support webp images. More importantly I need to actually create scaled images which I have been putting off...

Thanks for your comments/advice!

[saym]

I forgot how quickly a web page can load with no JS. Kudos!

[hansenzhang]

Thanks! So did I :)

[unnouinceput]

You might want to add some copyright notice. Even if you don't want to monetize them is better for others to ask your permission rather then lose them to hoarders and later watch them making money and you get null.

[hansenzhang]

Good reminder, I do have one on each page but realize it’s a bit hard to see with all the photos on the first page.

https://hansenzhang.com/copyright

[poyu]

Nice photos and nice website! A fellow film shooter approves! I also subscribe to the no JS philosophy.

[hansenzhang]

Thanks! My next quarantine project is to put in a sink in my basement so I can start printing again!

[serf]

i'm getting straight URLs at the bottom of the page. Vermont related URLs.

Neat photos though.

[hansenzhang]

Ok thanks for the heads up!