WordPress was not designed for photography portfolios or high-quality photo presentations. So, it takes some specific settings to make WordPress photo-friendly. In the end, it is possible to make a beautiful, fast photography portfolio with WordPress.
I put a special emphasis on making sure my portfolio loads quickly because visitors will click through more pages and Google’s ranking algorithm promotes faster websites.
WordPress Photo Portfolio Mistakes
If this is the first time building a WordPress photography portfolio here are some common mistakes to avoid. None of these mistakes will your destroy your website, but they will probably hurt your portfolio over time.
- Don’t use a fancy gallery plugin. They look beautiful at first but if you use a non-standard photo gallery plugin you will be stuck with it. Does anyone remember SlideShowPro? In a few years the developer may stop updating it and then your website will be broken. I break this rule by using the Simple Lightbox plugin, but it is designed so that uninstalling it doesn’t break my website. The built in gallery functions work well and you can adjust the CSS theme to make it personal.
- Don’t use WordPress.com. By far the easiest way to set up a WordPress Portfolio is with wordpress.com, but it limits the themes and plugins that you can use which will hurt the quality of the site in the long run.
- Don’t use flashy themes. It is very tempting to go to buy the flashiest WordPress portfolio theme off of Theme Forest. They look great in the demos, have fancy animations, and pretty colors. But they are usually designed with non-standard gallery plugins that, return to point 1, will be broken in a few years and are clunky to actually use daily.
WordPress Photography Portfolio Tips
These are the tips and tricks that I learned as I made this photo portfolio site over the past year and many iterations.
- The default Gutenberg page builder is probably good enough. Alternative page builders like Divi and Elementor give you more control, but their complex code will slow down the website, and the process of building each page. If you must use an alternative page builder for more flexibility, I’d suggest Oxygen. It is the most complicated, but produces clean, relatively fast code.
- 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 [April 2021], so keep your server on PHP 7.4 for a little while longer.
- Use an OpenLiteSpeed or LiteSpeed server connected to their Quic.cloud CDN. This has a lot of benefits. The LiteSpeed server stack is faster than the normal Apache server. It will also converts JPEGs to WebP file which are smaller and still high quality, and it makes an LQIP so that the photos appear to load faster. Plus all of this software and CDN is free for a portfolio sized low traffic website.
- Then let WordPress resize the photos 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
That speed mainly comes from carefully choosing the building blocks for my WordPress photography portfolio. I started with the Genesis framework and edit my posts with the default Gutenberg. Because the native page builder has a lower server overhead and longer support horizon.
To reduce the file calls I’m using a self-hosted Matomo for stats, self-hosting my fonts (not downloading them from google fonts), and using an emoji for a favicon.
Let me know if you find any other tricks, especially ways to preserve the color profiles through all the conversions.