<\/span><\/h3>\nAll eyes should be on your product. This is actually a very common mistake designers make \u2013 adding too many elements into the mix and effectively distracting the viewers.<\/p>\n
The product photo should be exactly that, a PRODUCT <\/em>photo.<\/p>\nYou can include contrast elements to highlight your product as shown in the screenshot below.<\/p>\n
<\/p>\n
Or, if you want to match the product\u2019s color with the background, you can choose to keep the poster clutter-free as shown below.<\/p>\n
<\/p>\n
As you can see, it includes all the information one might need but the watch is still the highlight.<\/p>\n
<\/span>2.\u00a0\u00a0\u00a0\u00a0 Ensure That the Color Goes with Your Brand Guidelines<\/span><\/h3>\nThe two examples above both have different designs, are different types of images, and showcase a different group of products.<\/p>\n
However, what they both have in common is that they match the brand color.<\/p>\n
Anne Klein, for instance, follows a black aesthetic. However, that\u2019s just the brand.<\/p>\n
Of course, there are watches of different colors. However, you will find that almost every product image, Facebook ad, and thumbnail follows the same branding principle.<\/p>\n
The text overlay offers some flexibility.<\/p>\n
That\u2019s what the template uses to match the watch\u2019s undertones.<\/p>\n
<\/span>3.\u00a0\u00a0\u00a0\u00a0 Use Different Images Showing Your Product from Different Angles<\/span><\/h3>\nWhen creating the perfect Shopify image for your product, it is a good idea to show the product from different angles \u2013 but in different images.<\/p>\n
Showcasing the same product over and over again in the same image, albeit from different angles, introduces clutter.<\/p>\n
And as you continue to add more and more elements into the mix, you will inevitably increase the file size as well.<\/p>\n
You\u2019ll have to scale it down later on.<\/p>\n
If you are trying to showcase a group of products, you don\u2019t have to name all of them. You can actually add a couple of them as shown in the image below.<\/p>\n
<\/p>\n
The main objective you should keep in mind is that under no circumstances should there be any clutter on your product or banner images.<\/p>\n
<\/span>4.\u00a0\u00a0\u00a0\u00a0 Compress the File Size of Your Images<\/span><\/h3>\nOnce you\u2019ve finalized the design, you will need to compress the file size of your image to minimize loading times, all while making sure the product image stays high-quality.<\/p>\n
This is known as image optimization.<\/p>\n
Pixelied lets you change the image size and quality of the image before you download it.<\/p>\n
It also lets you choose the format.<\/p>\n
For example, you can choose JPEG and download it by choosing a 5x image size and 10\u2019 image quality, or 1x image size with 5-8\u2019 image quality.<\/p>\n
While the former is suitable for printing, the latter is geared towards Facebook Ads, Shopify, your website, and other online platforms where loading time is important.<\/p>\n
<\/span>5.\u00a0\u00a0\u00a0\u00a0 Always Test Your Image<\/span><\/h3>\nAfter you\u2019ve downloaded the image and added it to your website, don\u2019t forget to test the image loading speed and visual quality.<\/p>\n
First, conduct a visual inspection. Load the page and see if it loads properly. Inspect the borders and then move in to make sure the alignment with headers is perfect.<\/p>\n
Make sure the image isn\u2019t pixelated. Try zooming in to see how far you can go.<\/p>\n
Next comes the loading time.<\/p>\n
Usually, the uploading time itself gives you a hint of how long it will take to download the image every time a new visitor comes to your store.<\/p>\n
On average, it takes seven times longer to upload an image than download it.<\/p>\n
However, there is a better way to know for sure where you stand:<\/p>\n
\n- Load your page.<\/li>\n
- Press Ctrl + Shift + C.<\/strong><\/li>\n
- The console will open.<\/li>\n<\/ul>\n
<\/p>\n
\n- Click on the Network.<\/strong><\/li>\n<\/ul>\n
<\/p>\n
\n- Press Ctrl + Shift + R<\/strong> to hard reset your page.<\/li>\n<\/ul>\n
You will see in red (or green) the loading time of your page along with other important metrics. The recommended page loading time is under 2 seconds.<\/p>\n