David Degner

How I built my Photography Portfolio with WordPress

WordPress was originally designed for text blogs running on resource constrained servers, but it has made a lot of progress and with WordPress 6.5 it works well for photography portfolios. It still requires some tweaking to make WordPress photo-friendly but ultimately, it is possible to have a beautiful, fast photography portfolio with WordPress.

I will skim over some of these ideas, but drop them into your favorite AI agent and ask for an expanded explanation.

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. Keep in mind that a photo portfolio grows with you, I have had mine for almost 20 years so doing it right the first time is important.

  1. Don’t use a fancy gallery plugin. They look beautiful in the demos, 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, but it is designed so that uninstalling it doesn’t break my website.
  2. 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 your site in the long run. Instead, install wordpress on your own server.
  3. 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.

  1. The default block editor is good enough, especially now with WordPress 6.5. 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.
  2. 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.
  3. 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.
  4. Use an OpenLiteSpeed or LiteSpeed server. This has a lot of benefits. The LiteSpeed server stack is faster than the normal Apache server. It will also convert JPEGs to LQIP so that the photos appear to load faster. Plus, this software and the Quic.Cloud CDN are free for a portfolio-sized low-traffic website.
  5. Let WordPress resize the photos but reduce WordPress’s default compression. Some websites suggest you should resize and optimize your photos before uploading them. I know that my portfolio will be up for 10+ years and I don’t want to rebuild it each time screens improve. So I upload the highest quality photos I can and let them sit on my server while wordpress resizes them for the correct size. Mine is set at 90% quality; 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;’ ) );
  6. 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.
  7. 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.
  8. Use only the necessary plugins. Here is my list: Connect Matomo, LiteSpeed Cache, Fluent Snippets, Lazy Load for Videos, Simplelightbox, The SEO Framework, Wordfence Security

Conclusion

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.