Pratikkumar P. Gaikwad | 15 min read | March 21, 2020

Tips and Tricks to Optimize Images on Shopify

1. QuickRead

When you run an online shop, optimizing the picture is an art you’d like to learn. A strong rule of thumb for e-commerce images is to remember to maintain the image file size below 70 kb. This can be difficult at times, particularly for larger pictures.

What is Optimisation of Image?

Image optimization is about reducing the image file size as much as possible without losing quality to keep the website load times short. It’s all about the SEO of the image. That is, having pictures of your product and decorative photos to rate on Google and other search engines.

Have you ever wondered?

  • How is it that my product images never turn up when I do a Google image search?
  • Will I need to apply alt attributes to my images?
  • What’s the JPEG, GIF, and PNG difference? When do I need to choose one over another?

2. Describe your images in plain language

Breezing through hundreds of product shots is relatively easy as is keeping the default names provided by your camera
It’s important to use specific keywords when it comes to image SEO to help your web page rank on search engines. It is important for image optimization to create concise, keyword-rich file names. Search engines like google, bing, yahoo, and many others not only crawl the website’s text but also crawl the names of the image files.
The default name the camera has given to the image (e.g. DCMIMAGE10.jpg) can be used. Naming the file in depth would be much easier though.Think of how consumers scan your website for items. What pattern naming do they use while searching?
Look at the website analytics to see what trends the customers follow in keywords. Determine the most common naming methods used, and apply the formula to the method of naming the image file.
If you won’t get that data-driven, just make sure you use specific, helpful keywords when naming your images (i.e. try to be descriptive).

3. Carefully add the Alt attributes

Alt attributes are an alternate text to images if a browser fails to correctly render them. They’re also used to access the internet. And if the picture is rendered, you can see the text of the alt attribute (depending on your browser settings) if you hover over it.
The alt attribute provides SEO value for your website as well. You will rank higher in the search engines by adding appropriate alt attributes to the images on your website which contain essential keywords. Indeed, using alt attributes may be the perfect way to show up for your e-commerce products in Google’s picture and site scan.
The first thing to do when optimizing image is to fill out the alt attribute for every image on your website.

Below are a few basic laws concerning the alt attributes:

  • Describe the pictures in plain words, much as you did with video file names.
  • Use them in your alt attributes if you sell goods which have model numbers or serial numbers.
  • Do not store your alt attributes full of keywords
  • Don’t use decorative pictures with alt attributes. Search engines will penalize you if they are over-optimised.
Ultimately, from time to time, still do a sanity test. Show the source of your webpage and check to see if your alt attributes are being properly filled out. If you’re going at the pace of entrepreneurship, you’ll be shocked by what you lack.

4. Selecting image dimensions and multiple shots of products wisely

Displaying several viewpoints of the product is standard practice. You would not want to display just one shot of the car, for example, particularly if you’re trying to sell it. Showing shots of the following will be in your best interest
  • Interior of the car
  • Rearview angle
  • Images of tyres and rims
  • Multiple images of the engines
Filling out your alt attributes is the perfect way to capitalize on those extra images. And the way you’d do that is to create unique alt attributes for every shot of the product.
The trick here is to add descriptions to the alt attribute of your base so that future searchers can land on your web. Google will reward you with searchers if you do the extra work.

A word of advice about images

Now you may want to provide your guests with wider views that can make for better user experience but be careful.
No matter what you do, don’t put the largest picture on your website and simply shrink the dimensions through the source code. Due to the larger file size associated with the image, this will increase the page load time.
Render it a smaller image, instead, and have the option to display a larger image in a pop-up or on a separate webpage.

5. Reduction of image file size

Consider this:

  • Close to 50 per cent of customers won’t even wait 3 seconds to launch an e-commerce site.
  • Globally, the average load time on the website is also rising.
  • Amazon found they would lose $1.6 billion a year if their sites were to slow down by even one second.
Google in its algorithm uses page load time as a ranking element.So, if you’ve got pictures that “drool” down the screen slowly and take 15 seconds to load? Then you have probably lost the client
When a customer arrives on your website, loading it will take a while, depending on how big your files are. The bigger the file sizes, the longer it takes to load a web page.
If you are able to decrease the size of your website image files and increase page load time, fewer visitors can click away while visiting your site.
One way to reduce the size of image files is to use Adobe Photoshop’s “Save for Web” button.When you use this instruction, you want to resize the image to the smallest possible file size while keeping an eye out for the image quality.
  • Quality: It can be found in the top right-hand corner (i.e. 70).
  • File format: It can be found in the top right-hand corner (i.e. JPEG).
  • Optimisation: Consider this checkbox in the top-right corner (i.e. optimized).
  • Colour: In the top right corner of this checkbox (i.e. Convert to RGB).
  • Downsizing and sharpening: Find this in the corner at the bottom right (i.e. W: and H:).
  • Expected file size: In the bottom left-hand corner (i.e. 136.7 K) find this.
You can also opt to “Export As”

How pictures can be configured without Photoshop

If you don’t have Adobe Photoshop, there are other online resources that you can use to edit images. Adobe also has a free smartphone and tablet picture editing tool, called Photoshop Express. This tool doesn’t have all the features of Adobe Photoshop’s desktop edition, but it does cover all the basics of image editing and doesn’t cost extra.

How large would photo files be?

It’s safe to try to maintain the image file size below 70 kb in e-commerce images. Often, particularly for bigger pictures, this can be difficult.

6. Selecting the correct file type

Three common file forms are used for uploading pictures on the web: JPEG, GIF and PNG.
Let’s look at three forms of files and how the same affects picture:
JPEG (or.jpg) pictures are a little an ancient form of format. JPEG became the Internet’s de facto default graphic. JPEG files may be greatly compressed, resulting in consistent photos with tiny file sizes. The JPEG format in the image above allows good file size consistency.
The graphics in GIF (.gif) are inferior to those of JPEG, so use for simplified things like icons or ornamental pictures. As I’m sure you know, GIFs even help animation.
Regarding the optimisation of graphics, the GIFs are excellent for basic web pictures (with just a few colours). Nevertheless, GIFs are not quite as appealing with dynamic pictures and objects. It refers, especially to large images.
As an alternative to GIFs, PNG photos are more common. PNGs accept far more colours than GIFs, so with time, as do JPEGs, they will not fade with re-savings. Although the PNG image form is becoming more popular, file sizes may still be considerably bigger than JPEG images.
Remember that the file size of the PNG-24 image is three times bigger than the PNG-8 version. Which is why you have to pay particular attention to PNGs.
Here are a few suggestions you can consider when choosing file types:
  • JPEGs are your best choice in most cases on e-commerce. The highest output is given for the smallest file size.
  • Do not use GIFs for big pictures of items. There’s no way to decrease the file size really high. Using GIFs only for photos and thumbnails.
  • Using GIFs only for photos and thumbnails.
    PNGs may provide both JPEG and GIFS with a suitable replacement. Start using PNG-8 over PNG-24 if you can only get product pictures in PNG-format. Because of its incredibly low file size, PNGs are as basic decorative pictures.

7. Thumbnails – The silent killer

Most e-commerce sites, especially in the category pages, may use thumbnails. Without too much real estate, they easily highlight items.
Thumbnails are fine, but they can be quiet murderer, you should be alert. The victim? Your website’s load speeds. Thumbnails are normally shown during the buying cycle at important stages. You could lose a potential customer if you prohibit your category pages from being loaded soon. (Note: Shops do not think about optimizing the thumbnail, as we take care of it.)
Create the smallest possible measurements of your thumbnail image. You may use a standard slide here in place of smaller file size. Note, the thumbnail’s accumulated effect on page load time would be immense.
Edit the alt reference text such that the text you will not use with bigger copies of the same icon is not duplicated. Indeed, render your alt text really special. The last thing you want is to index the thumbnail instead of the bigger picture. The alt text should be absolutely omitted from the situation.

8. Sitemaps

If the platform includes Javascript galleries, pop-up graphics or other “flashy” forms to improve the overall shopping experience, the Google picture maps can allow you to find the photos.
Web crawlers can not crawl pictures which are not named out in the source code of their webpage. Therefore, you must mention their position in a picture map in order to let crawlers know of unidentified pictures.
The search console helps you to upload a sitemap to Google.
Google has a range of image publishing tips that can enhance the SERP website. Other than Google will locate pictures on your page, you may even use Google’S sitemaps to provide Google with more detail about the photos on your page.
Using sitemaps will not guarantee Google indexes of your photos, but it is definitely a good move towards SEO content. You can use Google Webmaster Software to build the sitemap correctly.
To all of your photos, it is essential to attach special tags. A special chart may also be generated for the exclusive set of pictures. What is crucial is to apply all the details you need to any sitemaps when using different tags.

9. Decorative Images can slow your site

Websites also include a variety of colourful pictures including landscape views, buttons and borders. Something connected to the non-product can be treated as a decorative image.
Also if decorative images can render a website a lot more esthetic, they will contribute to huge cumulative file sizes and long load times. So you may want to look at the promotional pictures more carefully so that they do not hinder the potential of your website to turn guests into customers.
The file sizes of all decorative photos on the website will be reviewed and a prototype used to reduce file size.
Here are a few suggestions for decorative photos ‘ file sizes:
  • Render PNG-8 or GIFs for pictures that shape boundaries and basic models. You can generate photos which look fine, only a few hundred bytes in size.
  • Where necessary, instead of using pictures, use CSS to construct coloured areas. To remove any decorative picture, using CSS styling as much as possible.
  • Check out this big background picture in wallpaper form. That can be enormous archives. Shrink them without damaging the image quality as much as possible.
Another thing you may do is to take out the centre of the background picture to make it a smooth or even translucent hue. It will greatly raise the file capacity.

10. Content Delivery Network

Shopify retailers should not worry as Shopify is a hosting service, but some will pay special attention to it. The networks for content distribution (CDNs) are suitable for storing images and other media data. They will speed up the loading of your website and help solve bandwidth problems.
If it comes to backlinks, the only question is. Backlinks are, as you already know, key to SEO and the more backlinks you have, the stronger the search engines for your blog.
You will most probably delete the photo from your domain and place it in the domain of the CDN by putting the pictures on a CDN. And when anyone is linked to your post, they are linked to the CDN domain.
The best practices are, therefore:
  • Just because there’s something “trendy,” don’t follow it blindly. First, decide if it’s the right move for your business.
  • When the website does a lot of business every month, so the fact that a CDN will help fix bandwidth issues definitely is a smart idea.
  • When the platform only gets thousands of visits a day, you might be able to absorb the fee.
There are solutions to the SEO challenges of CDNs so make sure that you first strategize the push by looking for qualified assistance like OSC.

11. Extensive image testing

The whole point of optimizing your pictures is to boost your performance. We talked about file size reduction and how to filter the photos for search engines, but what about testing photos to see what translated to more customers??
Check the number of product images per page: Because load times present a challenge for many non-hosted eCommerce websites, that pictures per page increase prices and purchases by clicking. It is also possible to boost the user interface and contribute to further purchases by including a lot of photos per screen. Testing is the only way to find it out.
Check what your consumers want: By presenting your consumers with the opinions you want to see, you will expect improved consumer satisfaction. A great way to figure out is to scope out the consumers as they see the promotional shots on what they enjoyed best. It’s usually a great idea to interview and chat with your clients. Test for results, though.
Check the number of product lists on group pages you can have: 10, 20, 100 products? In order to see what fits well for your customers, teste the number of items you mention on category pages.

For Further Details or Additional Information

OR

If you want to know more about our Services