How to Optimize Images

• Overview
• Connect to Your Store via FileZilla
• Download the Images
• Sort Images by Size Locally
• Compress the Images Using Free Online Tools
• Re-upload the Compressed Images via FileZilla
• Verify the Updated Images
• Optional: Troubleshooting Connection Issues

Overview

Optimizing images is essential for improving website performance and reducing bandwidth. Large image files can negatively impact load times and user experience. This guide will walk you through the process of downloading, compressing, and re-uploading images to your store via FileZilla to ensure optimized images are used across your site.

Connect to Your Store via FileZilla

1. Install FileZilla: If you don’t have FileZilla installed, you can download it from here.
2. Get Your SFTP Credentials: Ensure you’ve submitted a support ticket to receive your SFTP credentials.
3. Configure FileZilla:
• Open FileZilla and go to File > Site Manager.
• Add a New Site:
  • Protocol: SFTP – SSH File Transfer Protocol
  • Host: ftp.americommerce.com
  • Port: 22
  • Logon Type: Normal
  • Username and Password: Use the credentials provided by support.
  • Under Transfer Settings, limit simultaneous connections to 2.
4. Connect: Click Connect. If successful, you’ll see your site directories listed.

Download the Images

1. Navigate to the Image Directory: In the right-hand pane (remote site) of FileZilla, find the folder containing your product images, typically located in /Shared/Images/.
2. Download the Images to Your Local Machine: Right-click the folder or select multiple files and click Download. The images will be saved to your local machine (left-hand side of FileZilla).

Sort Images by Size Locally

If you have a large catalog with many images, you may wish to focus on the largest files first if not using bulk-optimization tools.  

1. Locate the Downloaded Folder: Open the folder where the images were downloaded.
2. Sort by Size:
   • Windows: Right-click inside the folder, select Sort by > Size.
   • Mac: In Finder, click View > Show View Options and choose Size as a sorting option.
3. Select the Largest Images for Compression: Focus on the largest images first, as they will have the greatest impact on site performance.

Compress the Images Using Free Online Tools

1. Use a Free Compression Tool: Some recommended free tools are:
   • TinyPNG
   • Optimizilla
   • Squoosh
2. Upload and Compress: Drag and drop your images into the tool of your choice.
3. Download the Compressed Versions: Save the optimized images to your local machine, using the same filenames as the original images to replace them.

Note: There are free tools available. However, third party pricing may be included for more advanced, bulk-optimization tools.

Re-upload the Compressed Images via FileZilla

1. Reconnect to Your Store: Open FileZilla and connect to your site via SFTP again.
2. Navigate to the Remote Directory: Go to the same remote directory where the images were originally stored.
3. Upload the Compressed Images: Drag the optimized images from your local machine (left-hand side) to the remote directory (right-hand side).
4. If prompted, select Overwrite to replace the existing images with the optimized versions.

Verify the Updated Images

1. Clear Cache: Clear your browser cache and use the platform caching tools (Tools > Clear Cache) to ensure the new images appear.
2. Purge CDN: After clearing server cache, you can also use Tools > Purge CDN to clear the "Content Delivery Network"
3. Private/Incognito Browser window: In addition to those options, you can also check in an incognito/private browser window to ensure you're on a new session. 
4. Check the Site: Visit a product page and confirm that the new, compressed images are displayed correctly.

Optional: Troubleshooting Connection Issues

• If FileZilla is timing out, increase the timeout setting in Edit > Settings > Connection > Timeout to 180 seconds or disable it.
• If your credentials are not working, verify the username and password. If the issue persists, request new credentials from support.

Summary: Key Steps for Image Optimization

1. Download images via SFTP using FileZilla.
2. Sort images by size locally and identify large files for optimization.
3. Compress large images using free online tools.
4. Re-upload optimized images via FileZilla and overwrite existing files.
5. Clear cache and verify changes on the website.

This approach ensures that you reduce file sizes to improve load times while maintaining proper file organization for a smooth upload/download process.