How to Optimise Images for Shopify
Humans are visual creatures, and we respond more to imagery, video, and colours more than any other aspect of a website, so ensuring that your images are pixel perfect and easily viewable by the user is paramount. Besides the user benefits, there are other benefits to optimising your pictures, but how do you optimise images for your Shopify store? This blog will cover everything you need to know and some hints and tips along the way.
[lwptoc]
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.9.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https://morgandigital.co.uk/wp-content/uploads/2021/10/Optimise-Images-for-Shopify-1.png” alt=”Optimise Images for Shopify” title_text=”Optimise ImOptimise Images for Shopifyages for Shopify 1″ _builder_version=”4.11.3″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” custom_padding=”1px|||||” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]What Is Image Optimisation?
Image optimisation comprises of two things: reducing the file size as much as possible without compromising the image quality so that your website loads quickly, and the actions taken to benefit the SEO of the website such as alt tags, etc.
You will have heard of terms such as image alt tags, WebP, Jpeg, PNG and other industry terms that all relate to image optimisation, and whilst most of them can be fluff and mirrors, there are a few ones you need to remember:
WebP, JPEG, PNG: Are all types of files that images can be stored in and used on your website.
Alt-tags: An SEO term used to describe the process of adding a tag to the image explaining what it is for accessibility for users who cannot view the image or for such times when the image will not load on the device.
We will dig into these a bit later in this blog, but they are the main ones you need to know.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https://morgandigital.co.uk/wp-content/uploads/2021/10/Optimise-Images-for-Shopify.png” alt=”Optimise Images for Shopify” title_text=”Optimise Images for Shopify” _builder_version=”4.11.3″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https://morgandigital.co.uk/wp-content/uploads/2021/06/MB-BANNER.png” alt=”MB BANNER” title_text=”MB BANNER” url=”https://morgandigital.co.uk/contact-us/” _builder_version=”4.9.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.8.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.7.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]How Do I Optimise an Image Without Losing Quality?
It is said that the average website user will not wait longer than 3 seconds for a webpage to load, and images impact your website’s loading times probably more than any other factor, but how do you find the balance between image size and quality?
Two core factors help you to optimise your images without losing the quality:
Image file choice: JPEG, PNG, WEBP, SVG – it can be mind-boggling to know the difference between them and the best choice. Undoubtedly, the best choice for websites currently is WEBP – sadly, not everyone has the tools to create WEBP file formats.
The good news is that Shopify automatically converts and presents your images to users in WEBP format. However, it is still essential to optimise your image before uploading it to your website for the best results. Current industry standards use PNG formats as they offer the best balance between quality and file size.
Image dimensions: Have you ever visited a website, and the image is so tiny you cannot see it? Or is the other end of the spectrum so extensive that it takes an age to load and half of it is off the screen? Putting responsive web design to one side, this can be down to the image dimensions. Getting it right from day one can save you the hassle down the road of having to go back and change all images on your website to the correct dimensions.
It is important to remember there is no absolute right or wrong answer to image dimensions – as it all depends on where the image is to be used. For instance, the settings used for a hero banner (one that covers the whole top section of a website) will be very different from an image that only takes up half a page with text next to it further down the page.
As a rule, if the image is not being used as a full-screen image or full width, then 1000x1000px is an excellent place to start, icons should be no larger than 640x640px and hero images should be around 1500x450px. Remember, the larger the image dimensions, the more significant the file size, and the slower it will load on your website.
Optimising your images for SEO
Image optimisation plays an important part if you want Google and other search engines to rank your website. There are two main focuses for this: image filenames and image alt text, and both are as important as the other.
Image filenames: Your image file name should be what the image is; for instance, if it is a picture of a Ginger cat sitting on a table, the file name should be something like Gingercatontable.png.
Image alt text: This should always describe what is in the image, so using the above example, something like a ginger cat sitting on a table with a coffee cup next to it. It can be tempting to keyword stuff image alt tags; Google advises against this because accessibility readers use this and always keep it to a description of the image rather than another chance to add keywords.
Image Optimisation Tips For Shopify Summary
By now, you should grasp the basics of image optimisation for your Shopify store; as mentioned, Shopify will use WEBP format to present your images to users, but it is still vital to shrink and optimise images before you upload them.
If you are wondering how to do this, you can do it using Adobe Photoshop or Affinity Photo. However, if you do not have these, there are a few sites you can work on for a fraction of the cost if not for free such as:
Need further advice? Get in touch with us here at Morgan Branding we have a fully dedicated team ready to help you and your business get ahead online. You can get in touch via our contact page or get social with us on Facebook, Twitter, Instagram or LinkedIn!
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding_last_edited=”on|phone” _builder_version=”4.7.7″ background_color=”#ffffff” custom_margin=”20px|||” custom_padding=”0|0px|0|0px|false|false” custom_padding_tablet=”” custom_padding_phone=”||0px|” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.3.4″ text_font=”|300|||||||” text_text_color=”#232323″ text_font_size=”30px” text_line_height=”1.1em” header_font=”Advent Pro|300|||||||” header_text_color=”#000000″ header_font_size=”50px” header_line_height=”1.4em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” max_width=”660px” module_alignment=”center” custom_margin=”|||” custom_padding=”25px|10px|10px|10px” text_font_size_tablet=”52″ text_font_size_phone=”30px” text_font_size_last_edited=”on|desktop” header_font_size_tablet=”” header_font_size_phone=”29px” header_font_size_last_edited=”on|phone” locked=”off” global_colors_info=”{}”]
