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.

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. If you do want to use one doublecheck that it degrades gracefully when uninstalled.
  2. Don’t use WordPress.com. 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. 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 and in 5 years when everyone has larger screens the images will still look good. 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. You can check this in the WordPress admin section by going to Site Health -> Media.
  4. Use an OpenLiteSpeed or LiteSpeed server. If you use their full set of services and plugins it has a lot of benefits. But even with just the LiteSpeed server it is faster than the normal Apache server. I don’t user the LiteSpeed plugin because it got too unpredictable, but that is probably because I fiddle around with settings too much.
  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;’ ) ); I use FluentSnippets plugin to easily add bits of code like this.
  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.

Suggested Plugins

Here is the list of the WordPress plugins that I use on my portfolio website. Some of them may be useful to you.

Plugins I built

  • AVIF Local Support
    • Link: wordpress.org/plugins/avif-local-support/
    • Why it’s important: This plugin converts your high-resolution JPEG uploads into the modern AVIF format directly on your server. This ensures your portfolio images load incredibly fast without sacrificing quality. I also added a feature so that it loads Low Quality Image Paceholders before the full sized image downloads. It is pretty mature and stable.
  • Photo Collage
    • Link: https://wordpress.org/plugins/photo-collage/
    • Why it’s important: It isn’t very mature or stable yet. This plugin allows you to create unique, “chaotic,” and overlapping photo layouts. It breaks the grid of standard portfolios, giving your work a more natural and artistic presentation. This almost breaks my “Don’t use fancy photo layout themes or plugins”, but I built it in a way that if the plugin is ever uninstalled it degrades well and leaves the photos on the posts.

General Plugins

  • Simplelightbox
    • Link: wordpress.org/plugins/simplelightbox/
    • Why it’s important: Provides a clean, touch-friendly lightbox overlay. When a user clicks a photo in your gallery, it opens in a full-screen view, which is essential for detailed viewing of your work.
  • Cloudflare
    • Link: wordpress.org/plugins/cloudflare/
    • Why it’s important: Speeds up your website globally by caching content on Cloudflare’s CDN (Content Delivery Network). This is vital for serving large portfolio images to international clients quickly and adds a layer of security against attacks.
  • Connect Matomo
    • Link: wordpress.org/plugins/wp-piwik/ | https://wordpress.org/plugins/matomo/
    • Why it’s important: Integrates Matomo analytics into your dashboard. It allows you to track who is viewing your portfolio while respecting user privacy and keeping data ownership (unlike Google Analytics). The first link is for if you have matomo installed elsewhere, the second link is for installing it directly in wordpress.
  • Fluent Snippets
    • Link: wordpress.org/plugins/fluent-snippets/
    • Why it’s important: A safe way to add custom code (PHP, CSS, JS) to your site without editing theme files. Useful for adding small tweaks or specific functionality to your portfolio pages and designs.
  • Redis Object Cache
    • Link: wordpress.org/plugins/redis-cache/
    • Why it’s important: significantly improves the speed of the WordPress backend and database queries. This is usefull if you have Redis installed on your server.
  • The SEO Framework
    • Link: wordpress.org/plugins/autodescription/
    • Why it’s important: A lightweight, automated SEO plugin that helps your portfolio rank in search results so editors and clients can find you. It is preferred over others for being bloat-free and fast.
  • The SEO Framework – Extension Manager
    • Link: theseoframework.com/extension-manager/ (Note: This is a companion plugin not hosted on the main WP repository)
    • Why it’s important: Connects to the main SEO plugin to add advanced features and extensions, allowing for deeper optimization of your site’s metadata.
  • Wordfence Security
    • Link: wordpress.org/plugins/wordfence/
    • Why it’s important: The primary firewall and security scanner for your site. It blocks malicious traffic and protects your hard work from hackers and brute-force login attacks.
  • WP Mail SMTP
    • Link: wordpress.org/plugins/wp-mail-smtp/
    • Why it’s important: Fixes WordPress email delivery issues by routing mail through a proper server. This ensures that when a potential client fills out your contact form, the email actually lands in your inbox instead of the spam folder.

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.