Getting Netlify Large Media Going

Recently, I tackled setting up Netlify Large Media, and thought I'd share my experience. Git Large File Storage (Git LFS) is key here: it keeps large files out of your main Git repository. Imagine a website with 500MB of images – including them directly in the repo makes cloning a nightmare. Git LFS solves this by storing large files separately.

Netlify Large Media builds upon Git LFS, simplifying setup and adding a crucial benefit: on-the-fly image resizing via URL parameters. This automated resizing is a huge time-saver.

While the official documentation is a good starting point, I encountered a few hurdles, which I'll document below.

Necessary Installations (macOS)

These steps are for macOS; adjust as needed for other systems. You'll require:

1. Git LFS: brew install git-lfs
2. Netlify CLI: npm install netlify-cli -g
3. Netlify Large Media Plugin: netlify plugins:install netlify-lm-plugin followed by netlify lm:install

Linking Your Site

Authenticate with Netlify to connect the CLI to your project:

netlify link

This generates a .netlify/state.json file containing your site ID:

{
    "siteId": "xxx"
}

Setting Up Large Media

Run the setup command:

netlify lm:setup

This creates a .lfsconfig file:

<code>[lfs]
    url = https://xxx.netlify.com/.netlify/large-media</code>

Commit both .netlify/state.json and .lfsconfig.

Tracking Images

Use Git LFS to specify which image types should be managed:

git lfs track "*.jpg" "*.jpeg" "*.png"

(Note: I initially missed .jpeg, leading to issues. Ensure you include all relevant extensions.)

This generates a .gitattributes file, for example:

<code>*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text</code>

After committing and pushing, your images will upload to Netlify Large Media. This push might take a while, depending on file size.

A potential snag: My initial push stalled. The solution was installing the netlify-credential-helper.

This process isn't limited to images; any large binary file can be handled this way.

Post-Setup: Pointers, Not Files

After the initial push, your repository will contain only pointers to the files stored in Netlify Large Media.

On-the-Fly Resizing: The Best Part

Resize images dynamically using URL parameters:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Getting Netlify Large Media Going ">

Combine this with responsive image techniques for optimal performance:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Getting Netlify Large Media Going ">

The above is the detailed content of Getting Netlify Large Media Going. For more information, please follow other related articles on the PHP Chinese website!