Optimizing image galleries for mobile is extremely important. With over 50% of all website traffic coming from mobile phones, what does this mean for photographers online?
It means that if it is more than likely that your visitors will view your site and its portfolio on their mobile phone.
It also means that you will need 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 NextGEN Gallery plugin. Not only does NextGEN Gallery make basic mobile optimization easy, but it pairs easily with third-party tools by compressing your images even more.
Here is what you will learn.
- What exactly is image optimization
- What exactly is image compression
- Helpful features and addons
- How to automatically optimize galleries for mobile users
What Is Image Optimization?
Images are an essential part of your website's design and SEO. Not just because that's what websites need, but also because you're working with images regularly. Search engines like Google and Bing consider pages with images to be rich content. Images can also contribute to pages by providing extra space to put in related content and keywords.
However, images can have a major impact on how visitors and search engines see your pages. That’s why you want to optimize your images for viewing. Images can tend to slow things down. Especially when viewed on mobile devices.
There are mainly two primary ways to optimize your images:
- Technical optimization means certain tools adjust the dimensions of your images. For example, you can alter the size or resolution of an image, and even its file type, depending on how you want it to look on the page. Like converting a PNG file into a JPEG file or decrease and image size to speed up loading times.
- Content optimization means using HTML and image metadata to provide your readers and search engines with content that describes the meaning, function, and purpose of the image. This also helps with accessibility for people who have a difficult time reading screens.
Why Should You Optimize Image Galleries for Mobile Devices?
If you want attractive content that readers and search engines love, then you will want to include images, especially when publishing galleries of your photography.
As you have already heard, site speed impacts SEO. In fact, Google ranks pages based on how fast they load by its Chrome-based crawler. Heavy images can drastically slow that down. Moreso, the slower pages load, the more likely readers will bounce from that page without reading it.
Because most mobile-based devices are 3G or 4G, they're not as fast as your in-home Wifi. What this means is:
- Your site needs to load fast on common devices.
- Your site should implement necessary security measures.
Image optimization gets your site prepared for desktop and mobile users and ensures that mobile browsers still have the best reading or browsing experience.
What Is Image Compression?
Image compression is the practice of taking image data and reducing data size so that you can display the image with a smaller file.
Images files are composed of data related to specific colors on a per-pixel basis. The image data tells an image interpreter what color to display on each pixel, which is 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.
Then there is metadata. The copyright hidden in your images, or the geo location. Each of these little bits of data add to the overall file size of the file.
Other Gallery Content To Learn From
-
![[Big News] Keep Visitors Engaged with NEW Gallery Animations!](https://www.imagely.com/wp-content/uploads/2024/02/Big-News-Keep-Visitors-Engaged-with-NEW-Gallery-Animations-1-1-1024x495.png "Big News Keep Visitors Engaged with NEW Gallery Animations 1 1 | Imagely")
[BIG NEWS] Keep Visitors Engaged with NEW Gallery Animations!
At Imagely, we're always looking for ways to help photographers and businesses enhance their visual storytelling. A beautiful gallery is one thing, but what … Read more -
Why You Should Offer Image Commenting on Your Photography Website (And How to Get Started)
Offering image commenting on your photography website helps you boost engagement and improve transparency. Learn why (and how) to add this key feature!
Challenges of Image Compression
The more data you compress out of an image, the less quality your image will have. High compression might present a fuzzy, blurry, or pixelated look. There are also common file types typically used for certain things.
- JPEG files are usually best for the majority of the images you would use on the web, especially your photographs.
- PNG files are larger, and most commonly used for logos and watermarks because of the clean transparent look they can provide.
- GIF files are similar to PNG but can handle animation. The file size of these adds up fast.
- SVG files are more advanced and work similarly to a font file. They're vector-based, so they take up little space. But they're more difficult to work with in a website.
- WEBP files are newer to the Internet space. They're spearheaded by Google to replace all the other files, with a small footprint. Not all browsers support it yet.
NextGEN Gallery Features for Optimizing for Mobile Browsing
NextGEN Gallery offers several ways to optimize images depending on what you need.
- The lightbox feature are meant to help photographers that want to show their images large but keep the initial views smaller, like in a thumbnail gallery.
- The watermarking feature gives you the power to add text or PNG watermarks to your images. They are transparent but visible artifacts that show up only on images visible to the viewers.
- The Pro Lightbox included in NextGEN Plus and NextGEN Pro is similar to the lightboxes in NextGEN Gallery. However, it allows you to show entire galleries in fullscreen, has social sharing, image commenting, and can be branded to match your color scheme.
NextGEN Gallery is the best WordPress gallery plugin. Get it for free!
Optimizing Image Size for Mobile Browsers
There are several ways to optimize your images for mobile browsers using free tools and the NextGN Gallery plugin.
- One of the best ways to optimize your WordPress site is to reduce image size. Weight and loading times are huge factors in optimization, so using images with lower file sizes give search engines and readers a better experience with your pages. NextGEN Gallery can do this out of the box. You can enable this setting within Other Options.
- There are several free plugins and web utilities that will help you optimize image sizes like ImageMagick and ImageOptim. There are also paid apps like JPEGMini.
- You can install a WordPress plugin, like Imagify or ShortPixel to resize and compress your images.
- Be sure to use JPEGs for your photos and PNGs for logos and watermarks.
Optimize Image Display for Mobile Devices
If you have optimized your images 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 NextGEN Gallery plugin are already set up display nicely for mobile users.
All you need to do is make sure that Resize on Upload is turned on, as well as Backup Originals. With those two enabled, only the smaller images will be displayed by default. But the larger images will load in the Lightbox you choose.
This means that your website will load fast, and stay fast. No matter what.
Activate NextGEN Plus or NextGEN Pro and your galleries will display with Retina images. Meaning higher quality versions of the smaller images will be displayed on Retina screens but the standard lower resolution smaller images will be displayed on standard screens.
NextGEN Gallery Optimization Tutorials to Look Out For
This is only the a tiny piece of what you can do for mobile optimization with NextGEN Gallery. Here is some additional content you can read up on.
- Image sizes and resolution
- Uploading your original images
- Enabling digital downloads
- Minimum resolution for prints
- Creating a gallery in Lightroom
- Image Optimization for Site Speed
- The Ultimate Image Optimization Plugin Comparison
- 3 Advanced Optimization Techniques for Displaying Web Images
- A Beginner’s Guide to Presenting Your Images for the Web
- Image SEO Refresher for 2020
- Why Using Too Many Images Is Bad & How To Fix It
Conclusion
Image optimization is an essential task for any website, much less your photography portfolio. You have to keep your website lean and user-friendly. You also need to optimize it for mobile users.
Today we have covered what it means to optimize images and how to use that optimization with NextGEN Gallery to make your WordPress site perfect for all mobile users.
If you like what you’ve learned and want to jump in with NextGEN Gallery, then make sure to pick up the NextGEN Gallery Plugin for WordPress and upgrade to the Pro plan for additional features including Ecommerce with automated print fulfillment, digital downloads, proofing and more.
