CSS Sprite Generator for Thumbnails

Just off the top of my head: you might create the sprite image in Photoshop or your favourite image editor and use a custom field for the coordinates, and embed those coordinates in an inline style tag using the values of said custom field.

That would work if I only had a few posts. But I’d have about 400 images and 400 sets of coordinates to input by hand. I don’t have time to do all that. I’d like to figure out a way to have it built in PHP and run whenever a new post is created.

In non-code terms this is what I’m trying to figure out:

when a new post is published run:
loop through all posts
if (post has thumbnail) { add post thumbnail to image sprite, copy coordinates inside sprite }
end loop
append css for sprite coordinates, clear css browser cache

As an alternative, I’m also just trying to figure out how to speed up my page load time for the homepage and all image-populus pages. I currently average 4.25 seconds for the homepage to load.

Maybe you could use Infinite Scroll?

https://www.infinite-scroll.com/

Have you considered limiting the amount of posts per page to something like 10-20 posts instead of all 400?

I would recommend looking at the jQuery Lazy Load plugin.
https://www.appelsiini.net/projects/lazyload

The thumbnails only load once they are in view. This way you aren’t loading 400 in one go.