Envira Gallery Blog
Digital Photography Tips, Tutorials and Resources
Digital Photography Tips, Tutorials and Resources
by Gerald Jackson on Oct 10, 2021
In 2020, over 50% of all Internet traffic in the world came from mobile phones. Furthermore, over half of the video streams were from mobile phones. What does this mean for photographers online?
It means that it is increasingly likely that readers will view your photoblog or WordPress portfolio on their mobile phone.
It also means that you’ll want to optimize your image galleries for mobile phones. Galleries and images formatted for desktop users will not necessarily translate to the mobile experience, which can damage your SEO rankings and your readers’ experience.
In this article, we’ll cover the basics of optimizing your WordPress image galleries for mobile users with the Envira Gallery plugin. Not only does Envira make basic mobile optimization easy, but it pairs easily with third-party tools via adding to optimize everything about your galleries. That way, users can see your images as you want them to!
In this tutorial, we’ll discuss:
Images are a critical part of web design and SEO. Search engines like Google consider blog posts and articles with images to be rich content. Additionally, images can contribute to these articles by providing extra space to put in related content or keywords.
However, images can have a significant impact on how readers and search engines experience your pages. That’s why you want to optimize your images for viewing.
Generally speaking, there are two primary ways to optimize your images:
Suffice it to say that if you want attractive content that readers and search engines love, then you’ll want to include images. This goes double when you are publishing galleries of your photography work.
Another aspect of web design that impacts SEO is speed. Google ranks pages based on how fast they load in popular browsers, and things like heavy images can slow that process down. On top of that, studies have shown that the slower pages load, the more likely readers will bounce from that page without reading it.
Since many users are now almost exclusively using mobile devices for browsing, they are also browsing on the go on smaller devices and often on 4G speeds or less.
What does this mean for your content?
That’s why image optimization is critical. Not only does it gear your SEO for desktop and mobile users, but it ensures that mobile browsers still have a top-notch reading or browsing experience.
Let’s address the topic of image compression. For those who are not technically savvy, this might be a new term. Image compression simply refers to the practice of taking raw image data and reducing data size so that you can display the image with a smaller file.
Images are composed of bytes of data that refer to specific colors on a per-pixel basis. The image data tells an image interpreter what color to display on each pixel, which is then translated to an image on a screen. Image files with more complex color-data information will typically be larger, but will also produce more detailed and rich images.
If you’re familiar with taking photos with a digital camera, you’ll notice that these cameras most likely store images as “RAW” files. These files are minimally processed for compression, meaning that they store image data from the camera sensor with little compression. These files typically look great but take up a lot of space.
Speed Up Your Website with Envira Gallery’s Compression Tool
The Compression Tool directly inside Envira Gallery lets you to optimize your images and reduce their file sizes.
The image compression tool is available for users with any paid Envira Gallery subscription (Pro tier or higher).
If you’re using Envira Gallery Lite, head over to our documentation to learn more about upgrading your Envira Gallery license.
If you’ve already upgraded, you’ll just need to update the Envira Gallery plugin before you can begin compressing your images.
Learn how to set up the new Compression Tool inside Envira Gallery so that you can speed up your website and page loading times.
As you may have guessed, these large files would take a long time, and a lot of bandwidth, to serve on a web page. Image compression, then, takes image data and reduces the file size by reducing the amount of information in the image file.
While compression techniques are beyond the scope of this article, what this means is that you’ll typically experience a tradeoff between size and quality. The more data you compress out of an image, the less quality. Furthermore, certain compression techniques create specific file types more suitable for different uses:
Envira offers several ways to optimize images depending on what you need. This functionality primarily comes from Addons that provide specific optimizations:
Installing Envira Gallery Addons is a relatively simple process. On your WordPress Dashboard, click Envira Gallery > Addons:
Enter the name of the Addon you want to install in the Search Bar of the Addons page and press Return. In this example, we’ll get the Fullscreen Addon, so we search for “instagram”. The Instagram Addon card will appear at the top of the page:
Click the Install button, then click the Activate button that appears in its place:
You’ve now successfully installed the Addon! Repeat this process for each addon you want.
There are several ways to optimize your images for mobile browsers using free tools and the Envira Gallery plugin.
If you’ve optimized your files and you’re ready to display them, then the next step is to set up your galleries to operate on mobile devices.
The good news is that galleries created with the Envira Gallery plugin can be set up to display for mobile users.
Open the gallery you want to change:
Scroll to the bottom of the Gallery page and click the Mobile tab:
Click on the Create Mobile Gallery Images checkbox to enable special images for mobile galleries:
This will give your readers customized image layouts if they are using a mobile device. Once you’ve turned these mobile galleries on, you can adjust the settings to better suit your needs.
Some of the settings include:
This section also allows you to enable special mobile settings for showing a Lightbox for images.
Click the Mobile tab. Scroll down until you see Enable Lightbox? Checkbox, and check it:
As with normal mobile settings, you can also tweak how Lightbox displays work on mobile devices:
We’ve gone over the basics of preparing your Envira Gallery for mobile users. There are a few additional steps you can take to get your gallery mobile-ready:
The Fullscreen Addon gives you the flexibility to use images that fill the entire screen on a mobile device.
Install and Activate the Fullscreen Addon as described above. Then, select a gallery you want to enable fullscreen mode on and scroll to the Lightbox tab:
Scroll to the Enable Fullscreen View check box and check it:
Click Update to save your settings:
This will give your readers a special “fullscreen” option on Lightbox images that will fill the available screen.
You can protect all your images from theft using Watermark Addon. Simply install and Activate the Watermark Addon as described above. Then, go to a gallery you want to optimize, and click on the Watermarking tab:
Click the Enable Watermarking checkbox:
Now, you can rest assured that your photos are protected!
This is only the tip of the iceberg when it comes to optimizing images using Envira Gallery for WordPress.
As you can see, image optimization is a critical task for any website, much less a WordPress portfolio. Not only do you have to keep your site light and user-friendly, but you also need to optimize it for mobile users.
We’ve covered what it means to optimize images and how to use that optimization with Envira Gallery to make your WordPress site perfect for mobile users.
If you like what you’ve learned and want to jump in with Envira Gallery, then make sure to pick up the Envira Gallery Plugin for WordPress and upgrade to the Pro tier for all these great features.
Also make sure to follow Envira Gallery on Facebook and Twitter for more news and tutorials on WordPress optimization, Adobe products, and best photography practices.
Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.