On this site, there is a tier chart of my subjective ranking of all Pokemon to gen 8. The first draft of that tier list, had over 1000 images that would load. These images, at native resolution, would require a total download size of 138 MB! So my first task, was to resize them all, which I did using ImageMagick.
ImageMagick a great tool if you ever find yourself in that sort of situation. Resizing and converting the images to the webp format dropped the combined file sizes to about 10MB! An example command to resize a bunch of images in a folder would be:
magick mogrify -resize 160x160 -format webp -define webp:lossless=true *.png The webpage was still terrible to load though. The reason is because each image is a separate element that the browser must request and download. That is alot of overhead, and most browsers have a limit on how many simultaneous requests they allow. I don’t know what the limit is, but 1000 is certainly above it.
To work around that limitation, I stitched all the images into one file. This combined file dropped the total download size to about 5mb, which is good, but this also means the browser only needs to download a single file, to get all 1000+ images. An example command to stitch images into a grid like this is:
magick montage -tile 34x0 -background None -compose copy *.webp fullframe.webpUsing css styling, I then customized each element in the tier list to show just a small section of the greater image. For example:
background-image: url('./r/pokemon-images/fullframe.webp');
background-position: left -4800px top -3360px;
width: 160px;
height: 160px;Thanks to these tricks, if you visit the tier chart, all the Pokemon images load up almost simultaneously.
This trick is not my own and it’s actually been in use for a long time and in multiple situations. For example, this trick is used in games, such as Minecraft, to reduce processing load. It’s good trick to keep in mind if you are ever in a situation where you are loading a bunch of resources and the overhead is bogging you down.