Best Practices - Showit Image Optimization
When working on Showit SEO for photographers, I often notice that those sites have images that are much bigger than necessary. And as a former destination wedding photographer turned SEO pro, I understand the desire photographer’s have for high-quality images & how to balance that with the on-site user experience.
According to Portent, a website taking too long to load drops conversion rates by an average of 4.42% with each additional second of load time between 0-5 seconds. Using images that are too large on a website can slow down the loading time, making it difficult for visitors to view the website.
Since our goal is to delight and educate visitors in order to keep them on the site as long as possible & convert them to a lead, we want to reduce frustration by ensuring the website is quick and easy to use, it’s best to use images that are the right size.
Why you need to optimize your Showit website images
Optimizing the images on your Showit website will help make your website load faster and look better. This will give visitors to your website a better experience. When images are optimized, they take up less space and use less data, which means your website will run more quickly and smoothly. This can also help make sure that your website looks great, no matter what kind of device someone is viewing it on.
What determines the load time for a page?
Images, embedded code, text content, and even animations impact page load times. While text content typically has the least impact on load times, embed codes can slow down the overall load time of your web page.
Images are the biggest culprit for affecting load times. Photographers want their images to be well represented and innocently upload full galleries and/or large files thinking that will positively impact the displayed image. However, in doing so, we often see slow page load times that actually increase bounce rates and decrease click-through rates to internal pages.
“For every 100ms decrease in homepage load speed, a company’s customer base saw a 1.11% lift in session-based conversion. The speed of the site negatively impacts a user’s session depth, no matter how small the delay.”
Showit gives a great examples of how images directly impact page load times:
“One …example of how images affect load times would be by taking a look at an example blog post. Say …we added 100 images that are all roughly 2mb each. This means the blog post’s web page has to load in 200mb of data just on images.
The average user’s internet speed runs between 18-19mbps, which means this example post would take the user 4-5 seconds (in addition to any other page content) to load.”
ATT 4G download speed is 14–61 Mbps
That means a blog post with 100 images, unoptimized at ~2mb each, would take the user 6.6+ seconds to load.
And that doesn’t account for any other content loading…
Kissmetrics found that 47 percent of consumers expect a web page to load in two seconds or less. Google found that 53% of mobile users abandon sites that take over 3 (three) seconds for a web page to render.
Say goodbye to that website visitor–they’re bouncing.
Compressing Images for Showit
Compressed images are better for Showit SEO optimization because they take up less space on the web. This means that your website can load faster, which is important for your visitors.
Search engines like Google also prefer websites that are faster, so using compressed images can help your website rank higher in search results. Plus, compressed images help your website use less data, which can save you money in the long run.
What image formats are supported by Showit?
Jpg, png, gif — color space: sRGB
What image size should you upload to Showit?
According to Showit, images should be resized to 3500px on the long edge for faster uploading.
Don’t take it from me…out of the mouths of babes:
“We suggest resizing your original sized images to 3500px on the long edge to make the uploading process faster….Our image robots 🤖 will automatically deliver resized versions (of JPGs) to a viewer based on what device they’re viewing your site with.”
How Wide Should Your Images Be
For optimal Retina & HD screens, images should be (two) 2x the width of the container on your Showit site.
Since Showit will render a JPG version of your image based on the device being used, we need to consider the largest size, desktop, of the image needed and account for that.
When logged into Showit, click on the image you need to change, then click on the “Size & Position” tab and note the image width.
Showit desktop canvas views are usually 1400px wide
Desktop Safari browsers are between 1330-1640px
Technical Information
- In Google Analytics, go to the Audience section, then Technology, Browser & OS, and select the Screen Resolution Primary dimension.
- Alternatively, you can hit f12 in Chrome based browsers and use your browser’s developer tools to see any element size.
Image Resolution for Showit
Screen resolution works very differently than resolution on paper.
WAIT! I know you’re about to skip ahead, because you’re a photographer, and you know all about image resolution…but let’s review…
Most photographers learned that 72 DPI was the standard resolution for web, but that’s wrong.
DPI doesn’t affect how an image appears on your site; DPI stands for dots per inch on paper. PPI stands for pixels per inch.
Technical Information
“PPI or pixels per inch is a measure of how many pixels a screen can display in an inch. Retina screens have twice as many pixels, vertically and horizontally, which means that the space that used to be occupied by one pixel, now has four pixels! … To fix this we need to provide WordPress with denser images so there’s enough data to go around.”
– WPMUDev
Optimal Showit Image Settings
What we’re really after is the smallest file size with the highest resolution.
Long-edge or max-width around 2000-3500px
Image file size under 250kb
Showit says to keep “image files at a max of 500kb with an ideal goal of 300kb. This not only improves your web page load speeds but also with the increased speeds it promotes your page as being a quality web page for search engines like Google.”
So how do you achieve optimal Showit image quality? Through optimization of course…
How to optimize images before uploading to Showit
You may be asking if you can do anything to optimize image sizes in Lightroom before uploading to your Showit website, and the answer is yes.
We need to account for both file naming and image size/resolution before we bring images into Showit or the blog.
The image name will import automatically and become the SEO Title. Showit says, “A good tip is to avoid assigning the same SEO title to all your images as image reference can get confusing for users. Google recommends image titles is to providing good, descriptive titles and captions for your images.”
Optimizing Filenames for Showit Website Images
Optimizing image names & sizes should be part of your editing workflow. While you need to optimize image SEO description directly in Showit, if you use a strong naming convention as part of your workflow, you won’t need to edit the Showit Image Title.
For the purposes of this blog post, I’m going to show you how to optimize file names for Showit website images being used in a blog post.
File Naming Scenario
Business type: Wedding Photography
Business name: Margo Catherine Photography
Service area: Charlotte, NC
Blog post: Upscale Wedding at the Victrola Mansion
Couple’s last name: Thomas
Not every image needs a unique file name. Let’s set a descriptive file name around the main topic, and then establish 3-10 variations.
Image Naming Convention for Showit Sites
When I was a destination wedding photographer, I always named the highlight collection with the couple’s last name + venue name + city. This served me well and allowed me to search uploaded photos by any of those descriptors when modifying portfolio galleries or featured blog posts.
Main Scenario Filename: thomas-victrola-mansion-wedding-charlotte.jpg
Naming Image Groups
Since the typical wedding photographer’s Lightroom workflow involves creating collections of images based on the events of the wedding day, like details, bridal party, first look, family photos, wedding ceremony, cocktail hour, reception, sparkler exit, etc…, I recommend establishing variations of the main filenames for each using the descriptive term.
Scenario Filenames – Image Groups
Variation scenario filenames:
- Bridal-details-thomas-victrola-mansion-wedding-charlotte.jpg
- Bridal-party-photos-thomas-victrola-mansion-wedding-charlotte.jpg
- First-look-thomas-victrola-mansion-wedding-charlotte.jpg
- Ceremony-thomas-victrola-mansion-wedding-charlotte.jpg
- Reception-thomas-victrola-mansion-wedding-charlotte.jpg
How to optimize images during Lightroom export
Optimizing image sizes in Lightroom before you upload them to your Showit website is an important step in keeping your website running quickly and smoothly.
When optimizing images for Lightroom export, you only need to select the images that need to be added to the website.
Do not upload entire galleries, even if they’re optimized using the steps below. Only paying clients and inquiries who are doing their due diligence need to see a full wedding gallery, and for that purpose, send them to the gallery delivery system you use.
Steps to optimize images during Lightroom export:
- In Lightroom, select the images you want to optimize
- Go to the ‘Export’ tab
- Adjust the image size, long-edge or max-width to be between 2000-3500px
- Adjust the image file size to maximum of 300K
- Adjust the Lightroom quality. Lightroom quality of about 70 will work for final web use if you’re not using another compression tool. A Lightroom quality of 100 is ideal only if you’re using another compression tool like Tinypng.com (my favorite), Shortpixel, etc…
- Click Export
Required components for optimizing images on Showit websites
Now that you have your images exported from Lightroom, let’s look at the other components that are required for optimizing images on Showit sites, SEO Title and Description.
The image SEO Title is the image title – if you set a good operating procedure for exporting images & naming, this field will auto populate when you add images to Showit.
The image Description is the ALT text. ALT text should be descriptive of the image.
Showit image SEO Title = Image Title
Showit image Description = Alt Text
How to optimize File Names for SEO in Showit
Remember how we optimized each group of images with a solid Filename? We’re going to utilize that Filename and/or add a little context to it to turn it into a phrase of less than 30 characters.
How to optimize Showit image descriptions/ALT Text
Showit’s drag and drop builder, when you’re signed into app.showit.co–combines the image description with ALT Text.
When you’re optimizing your image descriptions in Showit, it’s vital to keep in mind that you are writing ALT Text.
ALT Text is for accessibility. In the most simplistic, and perhaps slightly ablest, way of explaining, proper ALT Text should describe the image for visitors who may not be able to see the image for themselves.
Guidelines for Writing Great ALT Text
- Don’t use “image of,” “photo of,” or “picture of”.
- Use sentences including proper sentence case and punctuation.
- Try to target 20 words or less.
- Don’t include information from the text surrounding the image.
- Include keywords when relevant. Do not keyword stuff.
- Make sure the alt text is unique for each photo.
Always follow accessibility best practices and include ALT Text on all images that add context to your content or images that are used for navigation.
Decorative images, those that do “not present important content, is used for layout or non-informative purposes, and does not have a function (e.g., is not a link)” should have an empty ALT Text, alt=”” .
“ in the case of “” (empty alt) …effectively hides the image from screen reader users. Jake Archibald, developer advocate for Google Chrome
Resources for Alt Text
Showit SEO Title & Description Example
Filename: Reception-thomas-victrola-mansion-wedding-charlotte.jpg
SEO Title: Outdoor wedding reception tables, Victrola Mansion – Charlotte
Description/ALT Text: Cream wedding reception table with blush flowers on outdoor patio of Victrola Mansion
Showit Image Optimization Recap
If you want to improve your Showit website’s speed, you need to optimize your images. Large images take longer to load, making it difficult for visitors to view your website.
This can increase bounce rates and decrease click-through rates to internal pages. To optimize your images, you need to resize them to the correct size, compress them, and use the correct file naming conventions. Showit supports the Jpg, png, and gif image formats, and images should be resized to 3500px on the long edge for faster uploading.
You also need to optimize file names and ALT text to ensure your images are accessible to all visitors.
By optimizing your images, you can create a better user experience, improve your SEO rankings, and save money.
When you’re ready to make your website SEO-friendly, here are a few tips to consider:
- Find a Showit template. Designs created by experienced SEO professionals already have your pages structured for SEO, so you just need to add the details.
- Get a FREE SEO audit. An audit will show you how your website is performing and provide insights on how to improve its SEO.
- Work with a Showit SEO Expert & Website Designer. If you’re considering building from scratch or relaunching your website with SEO in mind, find a website designer that specializes in brand identity and SEO.
Take your next steps today by connecting with me today and establishing the best move for a search engine optimized website to start generating organic traffic from Google.
Contact me today and/or leave a comment with your questions!
