Best Practices - Showit Image Optimization
When working on Showit SEO, we often notice that photographers’ websites have images that are much bigger than necessary for how they are shown on the page.
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.
Table of Contents
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 expects 14–61 Mbps of download speed, which means this example post would take the user 6.6+ seconds (in addition to any other page content) to load.
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.
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-2500px
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
Can you optimize image sizes in Lightroom before uploading to your Showit website?
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. We need to account for both file naming and image technical qualities in this step.
Optimizing Filenames for Showit Website Images
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.
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
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-2500px
- Adjust the image resolution
- 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 Convert.io (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.
Showit SEO Title – Title
Showit Image Description – Alt Text
How to optimize SEO Titles 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