All of us enjoy seeing pictures in the best quality, so do your customers. However, better quality images also mean bigger files and slower sites.
We use a dynamic system that allows you to change the quality of the images you upload to your homepage in the Code Editor.
By default, we have preset an average resolution that is best for page load speed? We set it this way because we want your website to rank higher in Search Engines.
Changing the quality of the Hero Banner Background
Before you change code, always make a backup of your site.
To change the quality of the Hero Banner Background image, we need to go to the file name _hero_banner.liquid. All of our current templates have this file.
In the second line of the file, you will see the code of the image and the "width" attribute with a numeric value.
Before we changed anything, we ran a speed test. See the results below:
The storefront loads fast (under 2 seconds).
Let's see what happens when we change the quality of the background image.
The width value must be changed from 800 to the size we want; for this example, we will use 1440 (pixels).
Now, the image looks nice and sharp, but this resulted in the loss of one second:
In conclusion, finding the right balance between good image quality and a fast home page that will rock SEO is what we should accomplish here.
Note: The recommended size for a hero banner is 1920 x 1080 or a 16:9 aspect ratio.
Changing the quality of your Logo
By default, the render quality of your image is responsive, it will be different based on the viewport (Mobile, Computer, Retina). While you can upload your logo in the maximum quality possible, there is no need to embed large images on the page if it is being viewed on a mobile screen.
On the other hand, smaller images will look blurry when displayed larger than its original size.
It is unnecessary to display a large image on a mobile device that was intended for desktop. Doing so can waste bandwidth. Ideally, you can have multiple resolutions available and serve the proper size depending upon the device accessing the data on the website.
Not to mention that some devices have high-resolution screens that need larger images than you might expect to display nicely. This is essentially the same problem but in a slightly different context.
In the code editor, you will see three values:
src = Older browsers that do not support the features below will just ignore them. Instead, those browsers will go ahead and load the image referenced in the “src” attribute as normal.
data-full = A very low-quality version of the logo is first rendered on “src”, which will improve your SEO rating while your site takes the time to render higher quality images and it will be replaced with the image from data-full.
srcset = defines the set of images we will allow the browser to choose between, and what size each image is so it is responsive. Meaning that it will adapt to each device.
In the example below, 66 (pixels) stands for the size of the first image to be loaded temporarily, until the bigger image is fully loaded. Then we have 132 for regular screens and 264 for retina screens.
In the Code Editor, you can find these values in the _top_menu.liquid file.
Once you have chosen the right size for your logo, you may see it blurry, especially if your logo is horizontal. If you use the inspector from your web browser's developer tools, you will be able to identify the real size:
If we wanted to keep this size, but do not like the quality of the logo, we must replace the size values in the Code Editor:
We suggest using 50% or smaller for the first value (138 px), 100% for the next two values (276 px), and 150% for retina screens (414 px).
Here is a look at the main elements to keep in mind
The goal is to find a balance between the quality image and the loading speed of your site. Having the best image quality is not worth the trade-off of your visitors bouncing from your site due to slower page load.
Combined with a great SEO strategy (see: Home Page SEO and Content SEO Overview). Your site will rank higher in search engine results. On the other hand, large files slow down your site and search engines penalize slow sites. Google is also likely to crawl and index your images faster for Google image search when they are optimized. Curious about what percentage of your traffic comes from Google image search? You can use a Google Analytics segment to check Google image search traffic.
Smaller image file sizes use less bandwidth. Networks, browsers and users will appreciate this.
In Uscreen sites, images make up an average of 80% of a web page's overall weight.
Also keep in mind that that the home page logo is also the logo for all custom pages and the catalog page as well. If you're looking to change the logo for the login page, end-user dashboard, checkout workflow, and gift card pages, then you will need to change that here.