Build a Photography Portfolio with WordPress
WordPress is not designed for photography portfolios or high-quality photo presentations. So, it takes some work to make WordPress photo-friendly. Ultimately, it is possible to have a beautiful, fast photography portfolio with WordPress.
I put a special emphasis on making sure my photos look good and the portfolio loads quickly because visitors will stay longer, and Google’s ranking algorithm promotes faster websites.
WordPress Photo Portfolio Mistakes
If this is your first time building a WordPress photography portfolio, here are some common mistakes to avoid. None of these mistakes will destroy your website, but they will 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 SimpleLightbox plugin (originally, I was 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 website 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 tempting to buy the flashiest WordPress portfolio theme from Theme Forest. They look great in the demos and 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 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 years and many iterations.
- The default Gutenberg page builder is good enough. Alternative page builders like Divi and Elementor give more control, but their complex code will slow down the website’s load time and slow your building process. If you must use an alternative page builder for more flexibility, consider Oxygen. It is the most complicated but produces clean, relatively fast code.
- Upload large high-quality images, and WordPress will compress and resize them appropriately. I save photos as 90% sRGB jpegs in photoshop 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 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. You can check this in the WordPress admin section by going to Site Health -> Media.
- 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 convert JPEGs to WebP files which are smaller and still high quality, and it makes an LQIP so that the photos appear to load faster. Plus, this software and CDN are 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;’ ) );
- Turn off “Scaled” image. 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 happens 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.
- Turn off webP. WebP is a great technology that makes image loading faster for most websites. But I have found that it often shows artifacts and converts color profiles. This noticeably decreases the quality of images.
- Use themes built by experts. Many have free versions. Here are a few of my favorites: Frost, GeneratePress, Astra, Genesis, ThemesKingdom. I am currently using the default Twenty Twenty-Three theme that comes with WordPress. I previously used a slightly modified version of Frost, and before that, I used the Genesis Sample Theme on this website.
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
But, in the end, I’m serving high-quality images on a $5 Linode server and still have a 100% on PageSpeed Insights.
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.