Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →The simplest way to build a responsive image gallery in WordPress is to use the core Gallery block. It automatically arranges multiple images, serves responsive image sizes, and can open images in an on-page lightbox with Enlarge on click. Add a plugin only when you need layouts, albums, video, migration tools, or lightbox controls that the block and your theme do not provide.
Build a responsive gallery with the WordPress Gallery block
- Prepare the images. Keep the subject positioned consistently, use descriptive filenames, and avoid uploading originals that are dramatically larger than the display context unless visitors need full-resolution files.
- Upload or select media. In the editor, open the block inserter, choose Gallery (or type
/gallery), then upload images or select existing items from the Media Library. - Set the column count. Choose a number that still leaves thumbnails large enough to understand at the narrowest important viewport. Preview the result on a phone before settling on a desktop-oriented column count.
- Add image information. Write alt text that explains each informative image’s purpose. Use an empty alt attribute only for images that are purely decorative. Add captions when they provide context that is not otherwise available.
- Choose the link behavior. In the gallery settings, link images to attachment pages, media files, or use Enlarge on click for a larger view without sending visitors away from the page.
- Refine the layout. Use alignment and wide or full-width options when your theme supports them. Set an aspect ratio only when cropping will not remove important content; otherwise preserve each image’s natural composition.
- Preview and test. Check phone, tablet, and desktop widths. Verify captions, keyboard focus, loading behavior, and whether the layout moves as images load.
WordPress documentation describes the Gallery block as a way to “easily add multiple photos and automatically arrange them in a gallery.” The block is responsive, but the exact controls exposed in the editor can vary with your WordPress version and active theme.
How WordPress serves images responsively
WordPress has generated responsive image markup natively since WordPress 4.4. Instead of sending one fixed file to every visitor, it creates multiple image sizes and normally outputs a srcset attribute containing candidate widths plus a sizes attribute describing the image’s rendered slot.
The browser combines those two values with the viewport width and display density, then requests an appropriate candidate. A phone can therefore download a smaller file instead of receiving the original desktop-sized image. Themes and plugins can alter the calculated sizes value with the wp_calculate_image_sizes filter, so inspect the final markup when a custom layout behaves unexpectedly.
Important implementation defaults
| Setting | Default documented value | What it means |
|---|---|---|
medium_large image width |
768 pixels | A generated intermediate size commonly available to responsive selection. |
max_srcset_image_width |
2,048 pixels | A safeguard limiting the largest width included in the generated srcset. |
These are implementation defaults, not guarantees for every site. A theme or plugin can change image-size generation or the maximum width.
Choosing columns and aspect ratios
Start with the narrowest important screen
Column settings are shared across the gallery, so a layout that looks elegant on a wide monitor may produce tiny thumbnails on a phone. Select the smallest number of columns that lets a visitor recognize each image and read its caption without excessive zooming. Recheck the result at the actual content width, not only at the browser’s full width.
Crop only when the subject allows it
A uniform aspect ratio makes a gallery orderly, but forced cropping can remove faces, products, charts, or other essential details. Keep natural proportions when the complete composition matters. If you do use a ratio, inspect every crop at phone width and in the enlarged view.
Adding a lightbox without creating a performance problem
The Gallery block’s Enlarge on click option provides a core lightbox-style experience. It keeps the visitor on the page while opening a larger image. Test the resulting overlay with a keyboard, including visible focus, a usable close control, and sensible focus return when the overlay closes.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallWordPress 6.4 introduced a core Image-block lightbox setting that themes can enable through settings.blocks.core/image.lightbox.enabled in theme.json. This setting applies to the Image block; gallery controls and labels remain dependent on the installed WordPress version and theme, so confirm the options shown in your editor.
Keep the lightbox efficient
- Use generated image sizes for thumbnails and reserve the larger file for the enlarged view.
- Preserve width and height metadata so the browser can reserve space and reduce cumulative layout shift.
- Do not load full-resolution originals as the initial gallery thumbnails.
- Check the page with caching and image optimization enabled; plugins can change markup and loading order.
When a gallery plugin is justified
Install a plugin for a specific requirement the native block cannot meet, rather than adding one by default. Plugin features and vendor performance claims can change, and there is no independent, universally valid speed benchmark for these options across hosting stacks.
Rank #4
| Plugin | Documented strengths | Choose it when you need |
|---|---|---|
| Envira Gallery | Responsive galleries, responsive lightbox with touch/swipe and fullscreen, albums, video galleries, lazy loading, image compression, and block-editor integration. A paid Pro upgrade is advertised for additional features. | A bundled lightbox, albums or video, and a guided gallery workflow. |
| FooGallery | Seven documented free layouts, including responsive, masonry, justified, portfolio, single-thumbnail, and carousel; built-in lightbox; albums; block-editor and shortcode support; lazy loading; pagination; reduced layout shifts; and migration from other gallery plugins. | Several layout styles, pagination, or migration from another gallery plugin. |
| Modula | No-code responsive galleries, custom grid sizing, cropping control, hover effects, watermarking, and optimization extensions. | Fine-grained grid sizing, hover treatments, or watermark and optimization add-ons. |
Before choosing, compare layout control, lightbox navigation, albums and video, migration support, optimization, accessibility controls, editor integration, licensing cost, and ongoing maintenance. Treat feature and speed statements on vendor listings as vendor descriptions, not as a guarantee for your site.
Accessibility and performance checklist
- Describe the image’s purpose in alt text; do not duplicate a caption word for word when the caption already supplies that context.
- Use captions that remain readable at narrow widths and do not rely on color alone to convey meaning.
- Preserve intrinsic width and height metadata and use WordPress-generated sizes to limit oversized downloads and layout movement.
- Test every lightbox with keyboard navigation and confirm a clearly visible focus indicator.
- Verify that the chosen crop keeps the subject visible in both the grid and enlarged view.
- Review the finished page with caching, compression, and other optimization features active, because plugin combinations can alter the final HTML and loading sequence.
Troubleshoot common gallery problems
Images look too small on phones
Reduce the gallery’s column count, check the content container’s width, and confirm that the theme is not applying an unexpectedly narrow image slot through its sizes calculation.
Best Value
The gallery shifts while loading
Ensure width and height metadata is present, use generated intermediate sizes, and avoid CSS or plugins that remove reserved image dimensions.
The lightbox is missing
Confirm that images are set to Enlarge on click or that your theme supports its lightbox setting. The available controls differ by WordPress version, theme, and block type.
Images are cropped incorrectly
Turn off the forced aspect ratio or choose a ratio that preserves the subject. Review each image rather than assuming one crop works for the entire set.
A plugin gallery is slow or conflicts with the theme
Test with caching and optimization enabled, disable overlapping lightbox or lazy-loading features, and compare the plugin’s generated markup with the native Gallery block before committing to it.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
