Creating High-Performance WordPress Photo Galleries with FooGallery and ShortPixel

For photographers, bloggers, online shop owners, or anyone else displaying a large number of images on their WordPress site, a photo gallery plugin is essential. Not only does it provide you with a visually engaging way to showcase your images, but it can also help with improving website performance. 

Of course, you need the right tools to get the best results. For this, we recommend using FooGallery and ShortPixel. FooGallery is a powerful WordPress gallery plugin that you can use for building and managing photo galleries on your website; and ShortPixel is the ideal image optimization tool. 

In this article we’ll look at how, with these two plugins, you can create engaging image galleries that boost performance.

Understanding Gallery Creation with FooGallery

If you’re using images on your website, then it’s advisable to use a photo gallery. Not only does a gallery provide an engaging way to present your photos, but it is also better for performance. Using full-size standalone images can slow down page speed, especially if there are several images on a page, whereas a gallery uses smaller thumbnails, opening full-size images in a lightbox. 

FooGallery is a great option for a WordPress gallery plugin. It comes with multiple layouts, such as masonry, carousel, slider and grid templates, and includes a built-in lightbox and a variety of customizations. This means that you can create and style any number of captivating galleries, aligned with your needs and the overall appearance of your website. 

You can also make use of premium features like filtering, search and pagination to further customize your gallery. For large galleries, this can further improve performance (as not all gallery images are loaded at once), as well as navigation and user experience. 

The different FooGallery plans include additional features, such as ecommerce integration, watermarking, video embedding and more. These give users plenty of options for creating galleries, whether as portfolios or for an online store. 

How to Set Up Galleries with FooGallery

FooGallery is an intuitive plugin, making it easy to set up and create galleries. Here are the steps you’ll need to follow to create a simple gallery:

• Choose the FooGallery plan that you need, and then purchase or download the plugin. If installing from within your WordPress site, click on Activate and then Install. Alternatively upload the plugin .zip file and activate your license using the license key provided. 
• To create your first gallery, click on FooGallery -> Add Gallery. A new gallery page will open, where you can name your gallery and add media. You can upload media to or select items from the media library. Depending on your FooGallery plan, you could also import videos, or load a gallery from a source like a server folder or WooCommerce. 

• Once your images have been added, you can select the gallery template you would like to use. If you toggle over to the Gallery Preview panel next to the Media Items tab, you will see a live preview of how your gallery will appear, based on the layout and settings selected. 
• The settings and customizations available to you will depend on the gallery template selected and the plan you’re on, but you will have a range of options regardless. For example, you can change the hover effects, loading effects, or hover icons. You can adjust the lightbox settings. Or you can add filtering, paging, a search bar and other more advanced features. 

• Once you are satisfied with your gallery, click on Publish. You can either use the shortcode provided or the FooGallery block in the Gutenberg editor to add your gallery to pages, posts or widgets. 

You’ll now have a visually-appealing photo gallery that will perform well. However, even with lazy loading and other performance-focused features, you can still improve your gallery’s performance by optimizing images before adding them to your gallery. This can further improve page speed and ensure your gallery is delivering the best experience for your users. 

Leveraging Image Optimization for Gallery Performance

Image optimization is an essential step in image management for any website. This is the process of reducing the file size of images while maintaining image quality. It can involve several techniques such as resizing, compression, and choosing the right format for your image. 

There are numerous benefits to doing this: 

• Smaller image sizes: As images are optimized, the file size is reduced. This results in less bandwidth being used, and less server space required for storage.
• Improved page load speed: As images are smaller, they load faster, resulting in better page load times. 
• Better SEO: This has a knock-on effect as search engines favor faster page speed, which can improve your ranking.
• Better user experience: It also goes a long way to improving UX, whereas slow pages often result in users leaving the page. 

There are several ways in which you can optimize your images. For example, you could edit them before uploading them to your website. Alternatively, WordPress users can make use of a plugin to automate the job for them. Below, we take a look at how to optimize your gallery images using the ShortPixel Image Optimizer plugin.

Implementing Image Optimization for FooGallery with ShortPixel

ShortPixel and FooGallery work well together, ensuring an optimized gallery experience. Both plugins work out of the box, with little to no setup required, so getting started is simple. 

You’ll first need to install ShortPixel: 

• Register for your free account to allow the plugin to activate.
• Go to Add New in the plugin page of WordPress, search for ShortPixel and choose the Image Optimizer version. Install and activate.

• Alternatively, download the plugin directly from ShortPixel and upload it to your WordPress site manually.
• To get an API key, go to the ShortPixel settings page in WordPress, enter your email address, accept the terms box, and click Request Key. The key will auto-fill the field and now you have full access to ShortPixel’s settings and optimization cloud.
• There is a Buy Credits link on the settings page to go to ShortPixel and buy credits or an unlimited plan. Or you can proceed with the free account to give it a test.

Optimizing images in FooGallery with ShortPixel is now a straightforward process. From the ShortPixel settings, you can select your compression type (Lossy, Glossy or Lossless). You can further optimize your images by:

• Selecting to compress your thumbnails.
• Enabling Smartcrop for automatic cropping, where applicable.
• Opting to compress PDFs should you have any on your site.

You can remove EXIF data from your images as well, however if you’re using this feature in FooGallery you should deselect this option. It’s also advisable to keep the Backup option checked, so you can test the different compression methods and reverse any unwanted optimizations. Finally, uncheck ‘Resize large images’ in ShortPixel general settings, which prevents any compatibility issues when FooGallery resizes images.

Once you’ve applied these settings, any new images uploaded to the media library will be optimized automatically. This will ensure that any images added to future galleries will be sized correctly. 

But what if you already have images in your media library, or you’ve already set up your image galleries? 

Bulk Optimizing Images with ShortPixel

Using the bulk optimizer in ShortPixel, you can optimize all of your existing FooGallery and Media Library content. You don’t need to reconfigure anything, as you’ve already set this all up. Simply go to ShortPixel in your WordPress admin dashboard and select Bulk ShortPixel. Start optimizing and follow the steps provided. All images will automatically be compressed.

With your images optimized, you can enjoy enhanced performance from your image galleries. Your load times will be quicker, which will help improve your SEO and user experience. 

Best Practices for Image Optimization in FooGallery

While using FooGallery and ShortPixel can help make a marked improvement in your gallery and image performance, there are some additional pointers that can be of further use. 

• Select appropriate image formats compatible with FooGallery, such as JPEG or PNG.
• Choose lossless or glossy compression to maintain a higher visual quality – lossy is better for general images as you lose image quality in the compression process.
• Resize and crop images before uploading, to fit your gallery’s layouts. Strictly speaking, this isn’t necessary with FooGallery, as you can usually set the thumbnail size for most of the gallery layouts. However, this is generally good practice when uploading images for the web.

• Utilize FooGallery’s built-in image optimization features, especially for larger galleries – this includes lazy loading (which is enabled by default), paging and filtering. It’s also advisable to use smaller thumbnail sizes for your photo galleries.
• It’s important to ensure that images are responsive and adapt to different screen sizes and devices. This helps you create a mobile-friendly website, which is important both for users and search engines alike. All of FooGallery’s layouts, and the built-in lightbox, are responsive.
• Explore advanced optimization techniques like using a CDN (Content Delivery Network), which is particularly useful for international sites. Caching is another method that can enhance performance and page speed. Various hosting platforms and third-party plugins can provide these for you.

Enjoy Enhanced Gallery Performance With FooGallery and ShortPixel

As we’ve seen, a WordPress photo gallery provides a variety of ways to showcase your images. For photographers, bloggers, and online store owners, this is an essential tool, not only to keep your visitors engaged, but also to improve your website image management and performance. 

FooGallery is a great option for a gallery plugin, providing you with a range of layouts, customizations and advanced features that will help you build captivating galleries. It also includes several ways to improve performance. 

Regardless, when using galleries on your website, you also need an image optimization plugin. ShortPixel provides the ideal solution. It’s simple to use and works effectively with FooGallery. 

Together, FooGallery and ShortPixel are a powerful combination, giving you a visually stunning website that captures audiences’ attention, performs well and improves your SEO.