Another step in recapturing content: Bringing photos back in-house.

With the ongoing enshittification of the platforms we once trusted, I took another step towards untangling myself from corporate social media. I finally committed to stop posting on Instagram and return to posting my photos on my own site.

View the photo page.

Background

After years of immersing these platforms into out digital lives, it’s unsurprisingly tedious to extract yourself from their tangled grasp. I’ve been dutifully moving certain projects off of Instagram and over to their own pages. The one big theme that is still hanging around is…the more general “photo” theme.

Design

Nothing too fancy in terms of the page design: fit into the site’s theme, basic full width grid for the photos and easy to update. Luckily, I’ve been enamored with the square aspect ratio for a while, so the layout was simple. Letting the photos stand on their own was also the point, so there’s no titles or copy to account for in the design.

Development

Since the design is so simple, I did want to add a bit of complication to the development side. I’ve been playing around with a few image gallery options, but didn’t really want to add the overhead of Javascript. Instead, I decided to use the page as an opportunity to once again tackle the image srcset property. Now, I’ve used srcset in production before with the picture element, but it’s always been confusing. In this case, I wasn’t interested in art directing the photos across viewport sizes or layouts, but merely trying to provide alternative sizes for better performance. This made adding the srcset property to the img element the best option.

As I mentioned, the spec for the property never seems to stick in my head. The production part is easy enough: create different sizes of each photo based on what size is needed in the layout for different viewports. For the code itself: add a list of source paths to the images along with media queries in the sizes attribute to give the browser a hint as to which image to use. Plus, provide a default fallback image path. It looks fairly straight forward, but there’s a bunch of interacting parts that always confuse me. Here’s my initial attempt with two image sizes for 480px wide and 720px wide. (Don’t forget the alt text either!)

<img srcset="blue-420w.webp 420w, blue-720w.webp 720w" 
    sizes="(max-width: 768px) calc(100vw - 4rem), calc(100vw - 6rem - 224px)"
    loading="lazy" src="blue-420w.webp" 
    alt="A dark blue sky in the top left with the silhouette of bare trees coming in from the bottom right.">

But…once you try to test it out, things start getting more complicated. Looking at the browser dev tools as you resize the window appears to load the correct image, but it also seems to show the incorrect size when you hover over the img element. The dev tools network tab does a better job, but still doesn’t adjust on resize or provide any insight into how the browser is processing the srcset setup.

It’s worth mentioning that the other reason I started with two sizes is…laziness. The performance value of srcset (and the picture element) run up against the additional production work of creating all the different image sizes. After 14 years on Instagram, the sheer volume of photos to process is daunting. Even discounting some of the other themes and culling many photos altogether, it was a bit to much to think about at the start. Starting small, cherry picking just a few images and just tackling two sizes kept the project moving.

Right. Basic layout and images formatted and set up in the HTML. Now on to that testing conundrum. It quickly became clear that the combo of my two images sizes and the media queries weren’t really helping anything. Turns out the layout didn’t really help simplify things either. The three column layout necessitated smaller images at larger viewport widths and the one column layout (below 768px wide) required large images initially — and then smaller images as the viewport shrank. So…two layouts needing three (or more) media queries to load two (or more) image sizes. This is where my head starts to hurt and I start to think, “there should be a tool for this”.

A bit of research and luckily, I was able to find this linter for responsive images to help my debug and build better media queries. Just run the bookmark (or Chrome extension) on your page and it will run through the images and conditions to make recommendations. In looking at my page, it recommended two different sets of potential image sizes and a new set of media queries. As I suspected, it meant creating more than just two image sizes, so I relented and braced myself for more production work. I went with the more lengthy size list recommended by the linter which meant abandoning my previous two sizes. Here’s the new code:

<img srcset="blue-256w.webp 256w, 
    blue-609w.webp 609w, 
    blue-888w.webp 888w, 
    blue-1240w.webp 1240w, 
    blue-1510w.webp 1510w, 
    blue-1740w.webp 1740w, 
    blue-1940w.webp 1940w" 
    sizes="(min-width: 780px) calc(33.33vw - 32px), 
	(min-width: 380px) calc(100vw - 64px), 
	calc(60vw + 80px)" 
    loading="lazy" src="img/photos/blue-609w.webp" 
    alt="A dark blue sky in the top left with the silhouette of bare trees coming in from the bottom right.">

So now there are seven image sizes to pair with the three media queries. A bunch more production work indeed. This immediately took me back to using the picture element in production, i.e., creating tons of different sizes for each image. I ran the linter again and it was happy, but I’m still not satisfied with the testing scenario. I think there’s an opportunity for browsers to really clarify which condition is being met and why it’s choosing a particular image size. Maybe I just need to start using a browser just for development.

The linter did seem to get confused on a couple of occasions. The first issue occurred as I added more and more images. Using the bookmarklet in Firefox caused the linter to hang and eventually crash. I suspect it’s just trying to handle too many options and runs out of memory. Switching over to Chrome and using the extension worked fine and didn’t crash. The other issue was a bit more esoteric. For a few of the images, the linter gets confused and thinks I’m using the srcset image list for art direction (using images with different content) when I’m not.

Images in srcset attribute must not be different

It seems the image name-609w.webp doesn’t show the same contents as name-1940w.webp does, the determined difference is 5%.

This is an issue I wasn’t able to resolve. Recreating the image sizes didn’t help. I can only suspect that the linter is choking on the pixels values between the small and large sizes. Perhaps it has something to do with the compression.

From there, it was just a ton of art direction to curate the next row of images, size them all, compression, format swap, update the HTML and repeat, repeat, repeat. Perhaps at some point, I set up a Photoshop action or Automator workflow to batch process the images, but that’s another project. I think the hardest part has actually been finding the original files. I end up cross referencing my phone with my export from Instagram and various external hard drives only to often discover a specific photo is only in one or two of those locations. Sigh.

Testing & Next Steps

Looking at the PageSpeed performance and it seems like Google is happy. Here’s the desktop score. The mobile score is almost identical with only the performance score being a tiny bit lower at 94.

PageSpeed is still mad at me (naturally) as the volume of photos keeps adding up to a large payload, but whatever, it’s my page, the images are set to lazy load and hopefully visitors are taking their time to actually look at the photos. Perhaps, I’ll limit the amount of images on initial page load and add a “show more” button to reveal more. Might be a good UX update to play around with in a future update.

I’m also not sure if PageSpeed is accurately evaluating the responsive images sizes. It’s still saying I need to size the images properly. Admittedly, I will need to go back and work on the image compression again to help reduce the overall page weight. I suspect I may need to add another image size to the srcset list and adjust the media queries to handle it. I’m just not convinced its working at it’s optimal best yet. I’ll also do more extensive performance testing with other tools to get comparison metrics.

Looking ahead, there’s still many more photos to process, so like the virtual library, I’ll add this page to my monthly backlog to update as I find time. I’m sure I’ll also need to adjust the layout for photos with different aspect ratios as I’m hoping to dive back into actual film photography soon. For now, this page is just one small step ahead to reclaim my content so keep checking back to see what I post.

View the photo page.

A real unique and beautiful color palette in this large piece. There’s also no fear in just painting over the smoke stain on the wall. I’ve no idea what the lettering says, but using white and having the lightening coming out from below creates an immediate cloud effect in my mind. The silhouette is a bit menacing, but the color choices lift the mood a bit and give it a more magical feel.

West Side, Manhattan.

A couple of lovely stencils found on the sidewalk from @go4tart. Having cut and painted many stencils myself, the detail here is really impressive. Plus anytime you’re using multiple colors, you’re increasing the difficulty in getting a good final image. The character choices and message are also guaranteed to make a New Yorker smile. There are also more stencils in the series for you to seek out.

West Side, Manhattan.

How an inside joke turned into a environmental cleanup

View the photo gallery

Background

When first moving into our house, my wife and I would find little items while digging around our yard. Antique nails from when the house was first built, marbles and toys from the kids who lived here before us, a hinge off of one of the shutters — just little things like that which I started calling “local archeology”. If we found something interesting, I would photograph it and post it on Instagram. Nothing too special and without any real plan. It was just an inside joke between us that I started using as a hash tag.

We’re lucky enough to live across the street from a state nature preserve and as we settled in to our new neighborhood, I began noticing more little things. Most notable was the trash and litter that would build up on the fence line with the preserve. Now, as I would stand around in the yard enjoying a cigar, this really started to bother me. I wanted to enjoy the expanse of forest in front of me without the eyesore of litter ruining the experience. Being of the “see a problem, solve a problem” persuasion, I started wandering across the street and picking up any bottles, cans or plastic bags that I would find along the fence line in front of our house.

Unfortunately, the more I looked beyond the fence deeper into preserve, the more trash I saw. A bit disappointing, but still rather ignorantly undaunted, I started heading into the park with a couple of five gallon buckets to pick up the trash along the roads near the house. The deeper I wandered through the trees through, the bigger the scale and magnitude of the problem became and the true beginning of this project began. What started as just picking up a stray beer can or coffee cup became pulling out large scale commercial and industrial waste from illegal dumping.

The more I looked, the further I explored, the more I found. Each time I returned from a collection hike, I would regale my wife with whatever weird piece of trash I found and if it was interesting, I would snap a photo and post it. The local archeology inside joke moved from our yard to encompass the preserve. As I discovered the serious commercial waste, my wife recommended I start documenting everything — even the mundane. The photo gallery is a summary of many (but not all) of the trash we’ve been pulling out the forest.

The Trash

Starting in March 2023, I started recording how many trash bags I packed full of litter on each hike. Here’s the break down.

Each bag has a 33 gallon capacity, so with one gallon weighing 8.33 pounds, it’s a maximum total of 275 pounds per bag for a total of 18,700 pounds or 9.35 tons of trash. In reality, every bag wasn’t always full and there’s no way I (nor the town sanitation staff) could even lift a bag that heavy. Let’s be conservative and say each bag averaged out to around 50 pounds for a total of 1.7 tons. Tons. Nearly, 3,000 pounds of trash collected into bags and removed.

And that’s just trash. We still need to factor in recycling. Every time it’s feasibly possible, I’m also sorting items into our local recycling bin for pickup. In a busy month of hiking, our 35 gallon bin is completely full and 90% of that would be pulled from the preserve. Certain weeks, I’m also including multiple smaller bags full of metal, glass and plastic. While I don’t have any hard data on the exact volume, I’d estimate a full bin about 30 times in 2023 for around 8,700 pounds or 4.35 tons of recycling removed from the park. 4.35 tons of trash that was just rotting in the woods.

Beyond the little stuff you can pick up and put in a bag, there’s also the big stuff. All the larger items that need to be dragged out, picked up by the city or taken to the county dump. Here’s a (partial) list of some of those big ticket items.

• Gas stove (2)
• Car frame
• Car hood
• Car rear differential
• Car seat (2)
• Window frame (2)
• Cast iron bath tub
• Cast iron sink
• Car batteries (7)
• Lawnmower
• Exercise bicycle
• Oil drum (5)
• Planter
• Tires (12)
• Tractor engine
• Fencing
• Pipes
• Cast iron tractor wheels (2)

It’s not until you start to see the totality of the situation that you begin to understand the level of damage. As I said, the numbers aren’t precise, but the pictures speak for themselves and I’m continually astounded (and dismayed) by what I find. I could go on and on about all the little weird things I’ve found.

The Gallery

Despite posting many photos of the smaller interesting finds on Instagram, I realized that many more were filling up my phone and hard drive. Hence the idea for a gallery to really show the effort in full. With only a couple of exceptions from 2022, the photos are all from 2023 and for the most part in chronological order.

The Design

The art direction doesn’t stray far from the general template I’ve been using recently for other single page projects. A header linking a back to the blog post, the main body of content and a footer with links off to other projects. From there, it’s a matter of styling and customization to fit the project theme.

The general inspiration comes from some of the archeology publications and sites. Sadly, they weren’t very inspiring as they’re designs were often outdated. About the most I could take from their pages was the serif headline, sans serif body copy pairing which, of course, isn’t very unique.

The color palette is Flexoki which is my new favorite as it speaks to my experience in print graphic design. The muted colors are warm and balanced. Admittedly, the design doesn’t take advantage of the full palette only using a few of the colors. It does use both light and dark themes depending on your settings. I’m fairly sure I’ll use the palette in future projects to really explore the full color set to see how they work across different design themes.

The fonts are Playfair Display for the headline (served locally) and Gibson for the body (served via Adobe). I really do love a heavyweight serif face and Playfair really looks great to convey a level of academic prestige (even if it’s a false notion). Gibson is used more sparingly as the gallery doesn’t really have much text. Again, the heavyweight version of the face are just fantastic and I really like how it looks for the subheads.

The Code

Like with the design, the basic template is the same as other recent projects using a CSS grid for the responsive layout. The only difference this time was to experiment with some column/row spans to mimic a masonry effect and showcase larger versions of some of the more interesting finds. It’s not a true masonry grid, but at certain viewport sizes, all the items nest and align nicely. At other sizes, gaps do appear, but that’s expected. There are Javascript libraries to achieve that true masonry effect, but here, where all the photos are the same aspect ratio, the JS overhead and complexity didn’t seem worth it.

Each photo has the opacity dimmed a little which normalizes on hover. This lets the photos blend a bit more with the color palette. On mouseover, they transition to appearing brighter and more rich which gives them impact. The photos can also be clicked on to open larger in a modal window. I’m using the a11y dialog script for the modal behavior. I experimented with adding a keyboard activated previous/next behavior to the modal, but kept getting the array numbering messed up in my Javascript, so I left it out. An update for another day or another project.

The Impact

It’s a fair question to ask: Is this work having a positive or negative impact on the preserve? I’d argue that it’s having a positive impact. I work from the motto of yes, there may be some short term disruption, but it results in long term benefits. Similar to the idea of “leave no trace,” I work to repair any soil disturbance and contrary to the “archeology” title, there is no digging of any kind. Likewise, I rotate the areas I work in over days and weeks to allow the wildlife to reclaim the space. I’m also time limiting my work, so that I’m not in the area for more than an hour or two at most.

There is, of course, also an impact on me. I love walking in the woods and coming upon a new debris field or trash pile can turn my emotions upside down. Sometimes it makes me angry and frustrated. Other times, just sad and disappointed. Sometimes, its just too much and I can’t handle tackling an area as it just feels overwhelming. I’m starting to realize I need to work on a better balance to approach the work only when I’m in the right state of mind. On the positive side, there’s is a sense of pride when I’m able to remove a giant piece of junk from the preserve. I’m also stubborn, so I keep going back for more. It’s almost like to trying to finish a video game quest as it taps into your competitive nature. Maybe one day, I’ll come back from a walk with an empty bucket.

The Future

One of things I’ve come to notice is that the forest wants to get rid of the trash. It wants to be healed. Bottles and cans seem to be pushed up from the soil. Storms, rain, snow and animals uncover items bringing them to the surface. I can pick an area clean only to come back a month later to find more. I have to remind myself all the time that I’m not going to find it all today.

Will I continue? Yeah, most likely. There are three areas of commercial dumping (one in a federally protected wetlands) that I haven’t tackled yet. I know those areas will weigh on my mind if I don’t try to clean them up. I’m not going to stop walking in the woods and the benefits of doing that (exercise, fresh air, quiet) make the potential emotional turmoil worth it. I do get to see amazing things on almost every walk and I’m now starting to learn (and report) more on the ecology for my wife and her non-profit.

Finally, a thank you and shout out to the local sanitation department who has unwittingly been helping with this effort. I can only imagine what they’re thinking when the roll up to our house and see what I’ve put out for collection. Same goes for the county hazardous materials recovery facility. They’re always friendly, helpful and accommodating when I bring in a truck load of crazy stuff.

Please don’t litter.

View the photo gallery

Found this sticker in the parking lot outside a small town supermarket. It’s big at about four inches square. There’s a disconnect between the professional vinyl color printing and the childlike illustration and type. I have no idea what it means beyond the obvious video game reference, but I do love the pencil scribbled response. When graffiti causes a response, it transforms into a conversation and eventually into a historical timeline.

Saranac, New York

In this obligatory, Valentine’s Day post, I found a black heart shape made from the remains of an industrial adhesive. My guess would be it was used to glue a sign to the stucco wall. Now it seems to carry so much unintended meaning. All the big existential human conditions are here, love, loss, memory, time, etc., as well as some more sinister cultural impacts, a black heart, dripping with animosity stains the rough surface defying the smooth, clean modernist world, forgotten but yet stubbornly remaining as a reminder of our search and our loss.

Midtown, Manhattan.

Somehow this really struck me as a summary of the current geopolitical situation. The faded 1950’s architecture, the broken sign with it’s web address as the brand, the haphazard construction permits on the doors, the fact that there are two sets of doors — one transparent, one opaque (one for you, one for them) the dirt and decay along the bottom panels (as if they building had been repeatedly kicked and scuffed) and finally, hiding in the lobby, a traffic cone warning us.

It’s the demise of respect for the U.S. around the globe, immigration and the promise of a better life — all coming together in this one shot captured before they put a shiny new facade on it. The architectural grid no longer able to impose a sense of ordered modernism in order to reassure visitors of it’s grandeur. A historical fragment that reveals so much more.

Midtown, Manhattan.