Black Friday Safety Kit: 20 Points Checklist!
Lights, Camera, ACTION!
The anticipation is almost over.
If you are in the E-Commerce industry, you know what we are talking about. The Big Black Friday is almost here!
Are you ready for it?
You might have designed super nice posts, placed ads and optimised your funnel. But?
Are you really ready for it?
The day after Thanksgiving has been regarded as the beginning of America’s Christmas shopping season since 1952.
Black Friday pulled in $6.22 billion in online sales last year, up 23.6% from 2017. and setting a new high, according to Adobe Analytics, which tracks transactions for 80 of the top 100 internet retailers. (US only)
According to finder.com, Baby boomers reported they plan to spend around the same as Millennials on beauty and makeup, at $2.9 billion dollars.
Although, unlike Gen X and Millennials planning to drop the most dough on electronics, Baby boomers seem to have developed a travel bug with an estimated $12.2 billion being planned-to-spend.
Will you be leaving this Friday on a jet plane?
VISUALS convert! Human Beings retain visual information for up to 3 days.
We connect better with the visual representation of the product and, quite often, don’t even read the description itself.
Here is the ultimate checklist on how to optimise your product images for the of the roof black Friday sales:
- Incorporate CDN delivery
- Optimise the TTFB
- Use 360-degree product view
- Make sure your images are responsive
- Correctly resize images
- Use the right image format
- Compress images
- Optimise alt attributes
- Caption the pictures clearly
- Take care of your product angles
- Know how to mix colors
- Create emotion fused visuals
- Use product corresponding backgrounds
- Optimise your thumbnails
- Use image sitemap
- Apply chroma subsampling
- Lazy-load non-critical images
- Deploy image spriting
- Start caching image assets
- Preload critical image assets
Before we jump into this list we would like to emphasize that optimisation automatisation of e-commerce websites visual assets is a must in 2019.
It’s hard to constantly keep up with best practices changes, and content that doesn’t go through a built pipeline can easily slip.
The amount of time you’ll spend reading blog posts and tweaking your config is greater than the monthly fee for a service that offers optimisation solutions.
Considering Black Friday is in short 3 days we are keen on offering you a FREE TRIAL Period with a dedicated team of experts who can get you upgraded and ready for Friday with the speed of light.
If you’re convinced about your Black Friday’s performance with us, we’ll be happy to offer you a 20% discount on any Cloudimage paying plans. Black Friday is everywhere!
Get your free trial on this link — Spots are Limited and are on a First come first-served basis.
With this being said, let’s jump into the checklist!
1. Incorporate CDN delivery
A CDN refers to a network of geographically distributed servers which cache a website’s static content near the location of visitors.
CDNs offer three main benefits:
- Users located far from the data center where the website or the application is hosted will experience lower latency and faster loading time.
- CDNs absorb high load during traffic peaks and save money on hosting infrastructures.
- CDNs keep websites safe by absorbing Denial-of-Service-like attacks.
If you are expecting a lot of traffic during the weekend, CDN delivery system will keep your page up and running, and will also enable faster loading time and speed image delivery across the globe.
If you are keen on giving it a go, get more information and try out our CDN services on cloudimage.io
2. Optimise the TTFB
TTFB is the time between an HTTP client request and the receipt of the first web page byte.
It is a critical dimension for any website because it affects ranking and user experience, so it is very important to make the TTFB value the lowest possible.
In the above list we already mentioned some critical assets to manage. We can emphasize the reduction of HTTP requests here.
To reduce HTTP requests you need to check how many requests your website currently makes and remove unnecessary images. Once you made that, you can proceed by reducing the file size of remaining images and analysing which factors could affect the load speed. Other things you can do to optimise TTFB are: make JavaScript asynchronous and combine CSS files together.
3. Use 360-degrees product views
360 views are the types of content that are making customers believe they have all the necessary information to make the right purchase.
Visuals are not only a useful and efficient asset for conversion but can also have a positive impact on costs after the purchase.
Indeed, online shops generate many more visits than physical shops, but they also have compounded return rates (33%).
On average, 22% of returns are because the product doesn’t look like the online image.
The e-commerce challenge regarding product images is thus to show more and better.
Check out our famous 360 plugin on: https://github.com/scaleflex/js-cloudimage-360-view
4. Make sure your images are responsive
Responsive images are images that work well on devices with widely differing screen sizes, resolutions, and other such features.
Leverage the HTML5 <picture> element to make images responsive to different screen sizes.
Responsive images allow for an optimal user’s device type, window size, orientation, or resolution.
A responsively designed image does not rely on the default browser resizing to display images on various devices: it would be a huge waste of bandwidth to deliver an image prepared for a 15-inch laptop screen on a low-resolution 4-inch smartphone screen.
Instead, responsive images are prepared in various resolutions to serve all form factors in an optimal way.
Visit https://scaleflex.github.io/js-cloudimage-responsive/ to discover a high-performance responsive plugin that includes lazy loading.
Wordpress adept? Visit https://wordpress.org/plugins/cloudimage/ for a free WordPress plugin on image responsiveness.
5. Resize Images
There is no point in serving a large original image on the client’s web browser or mobile application if it’s only to create a small thumbnail.
Instead, all image sizes (thumbnail, preview, and full size) should be generated server-side and then delivered to the client-side accordingly.
The above example shows an original image weighing 4 MB that has been resized for different types of display on the web.
For the average broadband connection, server-side image handling accelerates the loading time by up to 1200%.
6. Use the right image format
Deliver WebP to compatible browsers, and JPG/PNG to non-compatible browsers!
Developed by Google, WebP is a modern image format that delivers superior lossless and lossy compression for images on the Web.
Compared to PNGs of similar SSIM index quality, WebP lossless images are 26% smaller in size. Compared to JPEGs of equivalent quality, WebP lossy images are 25–34% smaller.
If this sounds too good to be true, there is one caveat: WebP is only supported by a handful of browsers: Google Chrome 23+, Firefox 65+, Google Chrome for Android 50+, Opera 12.1+, and native Android browser 4.2+.
The below example shows an image that has been reduced by four times without any loss in quality.
WebP results in a 77% decrease in page size compared to JPEG.
7. Compress images
The JPEG image file is the most commonly used format for images on the Web and can be compressed without visible quality loss.
While JPEG does downgrade the quality of images in the interest of file weight (in MB), it is often able to reduce the image weight by three or four times without a visible reduction in image quality.
The below example shows an image that has been compressed by four times while still maintaining its original quality.
8. Optimise alt attributes
Alt text offers you another opportunity to include your target keyword.
It is a part of an HTML code to describe the appearance and function of an image on a page.
With on-page keyword usage still pulling weight as a search engine ranking factor, it’s in your best interest to create alt text that both describes the image and, if possible, includes a keyword or keyword phrase you’re targeting.
Example: <img src=”bird.png” alt=”Red-crested rooster crowing”>
Make sure that your alt text has:
- Keywords
- Is Short
- Is Descriptive
9. Caption the pictures clearly
Not only do captions give you more keyword placements, they’re also among the most-read text on your web pages.
A caption will appear beneath the image and should explain what’s in the image.
The main point of having a caption is for it to add context to your images so search engines can more easily understand them.
If your image would benefit from a caption, we would definitely recommend adding one!
Use keywords, but as with everything else, don’t overdo the keywords. Help your readers understand.
10. Take care of your product angles
You want to be able to recreate the experience of a customer walking into a store and being able to pick up a product and look at it from every angle.
Showcase your product by displaying pictures from different angles and from different proximities to give customers a feel for what the product will be like IRL.
This can also minimize the returns and maximize the number of positive decisions made by potential customers.
Pro tip: Wide-angle shots allow you a little more leeway when editing your photos, and they leave you the freedom later to add text on one side or the other.
11. Know how to mix colors
It’s all about the feeling you want your target audience to get when looking at your product.
Make sure to go by the old saying: “Less is more.” because mixing too many colors can have a confusing influence towards your buyers.
In a study titled “Impact of color on marketing,” researchers found that up to 90% of snap judgments made about products can be based on color alone, depending on the product.
You want your products to shine! So in most cases, your best bet will be to go with a simple, neutral background. By neutral, we’re talking white, beige, gray or black.
12. Create emotion fused visuals
When working on the product images context, make sure to include the emotional triggers you know work for your target audience.
Memories certain generation have, analogy, connection… If you use all of this, the emotional charge will be enough to level up your conversion.
Plus you will get instant brand loyalty.
“Emotion is a necessary ingredient to almost all decisions”
13. Use product corresponding backgrounds
Tell a story!
Every product image you have will be more desirable by the customer if you create a story they want to be a part of around it.
Fenty Beauty did an amazing job by creating their story about we are all equal and in it together mantra.
The color they use for the background of their products is nude and it symbolizes wholesomeness, warmth, and honesty. Values of a supportive community.
Keep in mind that background can also be situation related. It can be sand next to the ocean, a makeup table or at the party. It all depends on how you are telling the story.
14. Optimise your thumbnails
Thumbnail images are often displayed in a bulk at the bottom of the page. The ones below are images displayed at the bottom of a J.Crew shirt product page.
The goal is usually an upsell. You should absolutely display related products below or above the cart or purchase page and entice your customers to click.
Thumbnails, by default, need to be super small in file size. Less than 70 KB is ideal.
They’re best as JPEG or GIF files. Use Cloudimage.io if you need to resize your files.
And don’t forget to name your thumbnail images. They need solid names and alt attributes just like your product pics.
Optimising these thumbnail images will help you improve SEO and significantly increase the amount of profit you generate from each web conversion.
15. Use Image Sitemap
By incorporating your images into your sitemap, you are helping Google to crawl and understand your content faster and with that, your SERP ranking score is being enhanced.
A sitemap allows you to optimise images and videos for Google’s algorithms.
By Google’s definition: “A sitemap is a file where you can list the web pages of your site to tell Google and other search engines about the organization of your site content.”
Example of a sitemap:
Source: statcounter.com
For image entries you should include:
- Location (Location, or the URL where the image is located is mandatory. All other bullets are optional but recommended)
- Title
- Description
- Caption
- License
16. Apply chroma subsampling
According to Wikipedia: Chroma subsampling is the practice of encoding images by implementing less resolution for chroma information than for luma information, taking advantage of the human visual system’s lower acuity for color differences than for luminance.
Simply put, it is a form of compression that makes viewing high-resolution videos and images in your home possible
On its own, chroma subsampling can reduce the storage size and bandwidth requirements of uncompressed R, G, B visual data by 30–50% without significant image quality degradation!
Some good general rules: subsampling (-sample 2x2) is great for photos. No-subsampling (-sample 1x1) is best for screenshots, banners, and buttons. There’s finally compromise (2x1) is you’re unsure what to use.
Visit https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization for more info about how to achieve perfect levels of subsampling.
17. Lazy-load non-critical images
Lazy loading is a technique for increasing website loading speed, that defers loading of non-critical (off-screen) resources at page load time.
Instead, these non-critical resources are loaded at the moment of need.
Source: Medium.com
An example of image lazy loading in action. A placeholder image is loaded at page load (left), and when scrolled into the viewport, the final image loads at the time of need.
In the e-commerce industry, Lazy Loading is the single most important thing that will keep your visitors on your page.
Since visuals on eCommerce website can be overwhelming and decrease site speed significantly, lazy loading will allow your audience to see only images that are on-screen and speed up the loading time.
Black Friday purchasing information are made within a millisecond, no one will spend that time while waiting for your product image to load.
Also, the traffic jams on server levels are bound to happen during holidays, so this is a nice way to make sure you are ready for them as well.
18. Deploy image spriting
CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. The response time, with spirits implemented, is faster and more reliable.
Using image sprites will reduce the number of server requests and save bandwidth.
19. Start caching image assets
Image caching is a simple yet highly powerful speed optimisation concept. When the browser downloads an asset, it follows a policy dictated by the server to figure out whether or not it should download that asset again on future visits. If a policy isn’t defined by the server, browser defaults will kick in, which is usually to cache files for that session.
Caching has an immense effect on page load speed.
20. Preload critical image assets
A preload link directs the browser to begin loading a resource into the memory cache, indicating that the page expects with high confidence to use the resource and doesn’t want to wait for the preload scanner or the parser to discover it.
By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.
This influences the page loading speed as well as SEO points Google is giving to your website with every crawl.
In this example, Pacifico font is preloaded, so the download happens in parallel with the stylesheet.
By preloading e-commerce images and visuals, you are enabling your audience to firstly see what you want them to see, and therefore acquire complete control over their customer journey.
Now You Are Ready!
Consider this checklist as a guideline for every Holiday/Bigger event preparation.
Got any questions?
Shoot them in the comments below — and don’t forget that if you need help with scaling up your image optimisation, the limited holiday offer is available as of now!
Happy Shopping!
