Your First Lightbox Gallery

While creating your first lightbox gallery, you will need to create different size copies of your images that are compressed for website speed.  To accomplish this I use the following tools:

Microsoft PowerPoint: I use PowerPoint to create all of my images much like other people use Adobe Photoshop. Both programs would work, but I found it easier to use PowerPoint and it did not require me to purchase another software licenses. To learn more about how we use Microsoft PowerPoint to modify images, check out our video in the Lightbox to the right or visit our YouTube Channel.

Helpful Videos

How to Create Thumbnail Images in Powerpoint

Compressing and Resizing Images

Online Image Resizer (https://resizeimage.net/): This free site is probably one of the tools I use the most while creating content. The site allows me to crop, resize, and compress images all in one place.  This allows me to quickly create duplicate copies of the exact same image that are various sizes. This is especially important when you are optimizing content for mobile devices and for Retina displays.

Retina Displays: Images that are displayed on retina displays (iPhone, iPad, etc.) want an image that is twice the size of the original image. When the image is displayed it will appear to be the same size as the smaller image but it will be much clearer for the viewer.  The topic of image sizes can be very confusing, in this scenario we are talking about the dimensions of the image and not the weight of the file itself.  For example if you loaded your company logo that was initially 256 x 256, the retina (2x) version of that file would be 512 x 512.  The actual weight of the file will not necessarily be exactly 2x between the two files.

Header Image for How to use a Lightbox Gallery with Matthew Fulton looking at a lightbulb

Making an Lightbox Image Gallery

Think back to the last time you read an article on your mobile device and how small the images were displayed. If those images contained important details relevant to the article, the information may be overlooked leaving the article to appear incomplete.  By utilizing a lightbox image gallery, the author of the article can still share a small version of the image that allows the reader to choose if they wish to see a larger version by clicking on it.  This really becomes important for articles that include multiple images to avoid slow loading speeds due to the bloated images sizes.

Grouping Images with Purpose:

Lightbox galleries also allow the author to select which images should be combined together in a single gallery.  If your article has multiple sections, using different groups of images will help the reader better understand the separation of ideas being presented.  By clicking the image to the right, you will notice the lightbox contains a gallery of images that have been selected to be displayed together.

Visual screenshot that shows how to access the QuickBooks Online CSV import feature