WordPress was not designed for photography portfolios or high-quality photo presentations. So, it takes some special settings to make WordPress photo-friendly. In the end, it is possible to make a beautiful, fast photography portfolio with WordPress.
These are the tips and tricks that I learned as I made this photo portfolio site over the past year and many iterations.
- Upload large high-quality images, WordPress will compress and resize them appropriately. I save mine at 90% from photoshop in sRGB at full-res usually around 5000px. Yes, AdobeRGB preserves more color information, but many web browsers don’t display it correctly and the colors will appear flat.
- Make sure ImageMagick is installed and being used as your server’s image processing engine. It makes better-looking compressions and preserves the image’s color profile. Unfortunately, it isn’t completely PHP 8.0 compatible yet, so keep your server on PHP 7.4 for a little while longer.
- Use an OpenLiteSpeed or LiteSpeed server connected to their Quic.cloud. This has a lot of benefits. The LiteSpeed server stack is faster than the normal Apache server. It will also convert JPEGs to a WebP file which has a smaller file size and is still high quality and makes an LQIP so that the photos appear to load faster. Plus all of this software and CDN is free for a portfolio sized website.
- Then let WordPress resize them but reduce WordPress’s default compression. Mine is set at 90%, some set it to 100%. Add this line of code to your function.php file, changing the number to your desired setting. add_filter( ‘jpeg_quality’, create_function( ”, ‘return 90;’ ) );
- WordPress introduced a “Scaled” image in 5.3, where when you load a full-res image it automatically makes a 1200px version and all subsequent resizing happen from that 1200px version while the full-res image is never used or shown again. There is a “Scale Large Image Threshold” plugin that allows you to increase the size of that image. I set mine to 4000px. Be careful, the “Regenerate Thumbnails” plugin won’t regenerate the scaled image, so you will want to set all this up before uploading your photos. I pray for the day WordPress gives easy control and more documentation on the scaled images.
If you aren’t comfortable on the command line steps 2 and 3 can be simplified by using a managed host from here: https://litespeedtech.com/partners/hosting-providers
Part of that is from how I structured my website. I started with the Genesis framework and edit my posts with Gutenberg. Because using the native page builder has a lower overhead and longer time horizon. Stay away from the wordpress themes that you might find on Theme Forest or the page builders like Divi / Elementor unless you like slow, complex page building that will be hard to maintain after a few years.
To reduce the file calls I’m using a self-hosted Matomo for stats, I’m self-hosting the fonts, and using an emoji for a favicon.
Because compression becomes less effective and more visible when done many times it would be ideal for WordPress to always refer back to the source image when resizing and changing the format of the photo. Instead, a photo will be recompressed 2 or 3 times before it is presented on the website. I haven’t found a way around this.
Let me know if you find any other tricks, especially ways to preserve the color profiles through all the conversions.