Optimizing image sizes for SEO

[Ep2]

So my biggest loading speed comes from images. I've looked around for few hours now but just can't seem to understand how you actually optimize them. I mean simply playing with the size leaves awkward look on the. From my understanding, the images of the different collections on frontpage don't have to be as big but if you simply reduce the size then the actual product page image is small as well.

Basically what would be the most newbie friendly way to optimize the images for now? I don't have that many images at the moment, would just simply making the size of each image as small as possible without sacrificing too much quality be the way? I really have beginner understanding of code so no clue how to change the code for this one everywhere I looked they seem to explain it way too advanced just don't get it. 

"is resized in HTML or CSS from 480x480 to 177x177" Does this mean that the ideal product page size in this case is 480 but for the collections, it should be 177? How do I optimize for this the smartest way?

Thanks for anyone who has time to help

[PaulHarajda]

Hi!

There are a lot of apps for Shopify that help with Image resizing - also for SEO purposes - did you check them out?

https://apps.shopify.com/search?q=image+resize

BTW - Do you know the Google Page Speed Insights? It's often very helpful in speed-related issues?

https://developers.google.com/speed/pagespeed/insights/

--

Sales vs Weather Report - how weather-dependent are your sales?

Zombie Meter checks the quality of your traffic. Remember -  Zombies don't buy products. Customers buy products.

[Naana]

Hello Ep,

Optimizing images is very key for SEO; hence, should be taken seriously. Aside from that, it also hlsps with your page speed. This app will help with optimizing your images and other SEO issues.

Hope this helps,

Naana.

[Rockpapercopy]

I agree, using an app or a software to optimize the images for the web is the way to go. It's not always down to the image size, although the rule of thumb is that that the bigger images load slower. It's more about compressing the files so the images are web-friendly. Picmonkey has an option of compressing file sizes, as well as your computer's default image viewing/editing program should have it too. Apps are also a great option. 

[Bo]

Hey there Ep,

Bo here from Shopify Support!

Great insight, you are absolutely correct when it comes to image size slowing down your page load time. By decreasing the size of the image files on your webpage and increase page load speed, fewer will leave your site without letting it load.

One way you can reduce image file size is by using the "Save for Web" command in Adobe Photoshop. When using this command, you will want to adjust the image to the lowest file size possible while keeping an eye out for image quality.

• Quality: Find this in the top, right-hand corner (i.e. 70).
• File format: Find this in the top, right-hand corner (i.e. JPEG).
• Optimization: Find this checkbox in the top, right-hand corner (i.e. Optimized).
• Color: Find this checkbox in the top, right-hand corner (i.e. Convert to sRBG).
• Downsizing and sharpening: Find this in the bottom, right-hand corner (i.e. W: and H:).
• Expected file size: Find this in the bottom, left-hand corner (i.e. 136.7K).

If you don't have photoshop, don't fret! There are numerous free alternatives that have been mentioned earlier in this thread. Adobe even has a free mobile app, Photoshop Express for mobile devices and tablets.

Other impressive online image editing tools are:

• PicMonkey has been described by experts as a "staggeringly great photo editing tool".
• PIXLR is super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
• Canva is another fairly advanced online image editor.

For e-commerce images, a good rule of thumb is to try to keep your image file size below 70 kb. That can be difficult at times, especially for larger images.

As previously mentioned in this thread, apps are often the easiest, most pain-free way to optimize your page's images. I would recommend SEO Image Optimizer or Image Optimizer as they are the best-rated image optimization apps that can be found in our app store, the home to all of our best apps!

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best,
Bo

[AfterDarkGrafx]

Simple --> use these  tinyjpg.com  and tinypng.com  - they shrink large files down and keep quality.  

You can use google page speed insights,  tools.pingdom.com or gtmetrix.com to see where your site needs help.

James

[alicecooper2804]

If your using heavy images in your blog or article in your website, so site to be lazy to load whole page, finally i am saying to that it is the bad practice of SEO. if you want less load time, we have to be use tinypng.com for compressing images. 

[SquareLogic]

You can also use tiny-img.com to compress images manually.  I would replace Google page speed insights with WebPageTest.org.  PSI is not the best tool specifically for testing your Shopify store.  Another great app is Shopify Analyzer from SpeedBoostr.com.  Here is the link https://analyze.speedboostr.com.  You can figure out exactly which images are negatively affecting your store's load speed.

I hope this helps

[jamesscott]

8 Steps to Optimize Images for SEO

• Resize your images. Image size and file size are not the same thing
• Optimize image file names
• Use alt tags
• Optimize the image title
• Include captions
• Use unique images
• Ensure that your text complements the images
• Add image structured data