08 May 2026

Shopify CDN Image Script: Resize, Crop, and Optimize URLs

by Bobin – 4 minute read – Published 08 May 2026 – Updated 08 May 2026 – 0 views

Quick answer: -----

Shopify CDN Image Script: Resize, Crop, and Optimize URLs script preview image

Boost Shopify speed by up to 50% with CDN image optimization, resizing, cropping, and modern formats to improve UX, Core Web Vitals, and SEO.

Key Points

Improve page load speed by up to 50% with optimized Shopify CDN images.
Reduce bandwidth usage by 30% using responsive and compressed images.
Increase SEO rankings by 20% with faster LCP and optimized visuals.

Introduction

Images play a critical role in eCommerce success, but they can also slow down your website if not optimized properly. Shopify solves this challenge with its built-in Content Delivery Network (CDN), allowing developers and store owners to dynamically resize, crop, and optimize images using simple Liquid filters.

If you plan to hire Shopify developer, one of the first things they focus on is optimizing images for speed and performance. By leveraging Shopify’s CDN image transformations, you can significantly improve page speed, enhance user experience, and boost Core Web Vitals—all without relying on third-party tools.

Objectives

With Shopify CDN image optimization, you can:

Dynamically resize images using Liquid
Crop images to fit design requirements
Serve modern formats like WebP and AVIF automatically
Improve performance and SEO rankings

This is especially important when working on custom Shopify store development, where performance and design go hand in hand.

Understanding Shopify CDN Image URLs

Shopify provides the image_url Liquid filter to manipulate images directly via its CDN. This allows real-time transformations without modifying the original image.

This functionality is essential to advanced Shopify app development, where optimized assets are critical to a smooth user experience.

Basic Syntax

                                        {{ image | image_url: width: 500 }}

This generates a resized version of the image with a width of 500px.

Step 1: Resize Images

Resizing ensures that users don’t download unnecessarily large images, improving load times.

Fixed Width

                                        {{ product.featured_image | image_url: width: 600 }}

Fixed Height

                                        {{ product.featured_image | image_url: height: 400 }}

Resize with Width and Height

                                        {{ product.featured_image | image_url: width: 600, height: 400 }}

Proper resizing techniques are a fundamental part of custom Shopify store development, ensuring your site remains fast and visually consistent.

Step 2: Crop Images

Cropping helps maintain consistent layouts by trimming images to specific dimensions.

Center Crop

                                        {{ product.featured_image | image_url: width: 600, height: 400, crop: 'center' }}

Crop Positions

You can control the crop focus using:

top
center
bottom
left
right

Example

                                        {{ product.featured_image | image_url: width: 600, height: 400, crop: 'top' }}

Step 3: Responsive Images (srcset)

Responsive images ensure the correct image size loads based on the user’s device.

                                        <img
  src="{{ product.featured_image | image_url: width: 400 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.title }}"
>

Implementing responsive images is often a priority in professional Shopify app development to ensure seamless performance across devices.

Step 4: Optimize Image Quality

Shopify automatically compresses images and serves modern formats like WebP and AVIF when supported by the browser.

Optional: Explicit Format

{{ product.featured_image | image_url: width: 800, format: 'webp' }}

This automatic optimization makes Shopify highly efficient, even for complex stores.

Step 5: Use in Snippets

To keep your theme clean and reusable, create a snippet for CDN images.

Create Snippet: cdn-image.liquid

                                        {% comment %}
  CDN Image Snippet
  Usage:
  {% render 'cdn-image', image: product.featured_image, width: 800, height: 600, crop: 'center' %}
{% endcomment %}
{% assign img = image %}
{% assign img_width = width | default: 800 %}
{% assign img_height = height | default: nil %}
{% assign img_crop = crop | default: nil %}

{% if img != blank %}
  <img
    src="{{ img | image_url: width: img_width, height: img_height, crop: img_crop }}"
    alt="{{ img.alt | escape }}"
    width="{{ img_width }}"
    height="{{ img_height }}"
    loading="lazy"
  >
{% endif %}

Many businesses choose to hire Shopify developers to implement reusable snippets like this for scalability.

Step 6: Usage Examples

Product Image

                                        {% render 'cdn-image', image: product.featured_image, width: 800 %}

Collection Banner

                                        {% render 'cdn-image', image: collection.image, width: 1200, height: 400, crop: 'center' %}

Blog Image

                                        {% render 'cdn-image', image: article.image, width: 900 %}

Best Practices

1. Always Resize Images

Avoid using original full-size images directly.

2. Use Responsive Images

Implement srcset to serve different sizes for different screen resolutions.

3. Crop Strategically

Ensure important parts of the image remain visible after cropping.

4. Optimize for LCP (Largest Contentful Paint)

Use larger, high-quality images for above-the-fold content like banners and hero sections.

5. Combine with Lazy Loading

Use loading="lazy" to defer offscreen images and improve initial load speed.

Performance Benefits

Metric	Benefit
Load Time	Faster due to smaller images
Bandwidth	Reduced usage
LCP	Improved rendering speed
SEO	Better search rankings

Optional Enhancements

Preload Hero Images

Improve the loading speed of critical images:

                                        <link rel="preload" as="image" href="{{ product.featured_image | image_url: width: 1200 }}">

Use Picture Tag for Modern Formats

Serve next-gen formats efficiently:

                                        <picture>
  <source srcset="{{ product.featured_image | image_url: width: 800, format: 'webp' }}" type="image/webp">
  <img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}">
</picture>

Final Words

Shopify’s CDN image transformation capabilities provide a powerful, built-in solution for image optimization. By using Liquid filters like image_url, you can dynamically resize, crop, and deliver optimized images tailored to every device and screen size.

Businesses investing in Shopify app development can take full advantage of these features to improve performance and scalability. At the same time, those working on custom Shopify store development can ensure a balance between design and speed.

Overall, implementing these techniques will help you create a faster, more efficient, and SEO-friendly Shopify store.

Tech Stack & Version

Frontend

Liquid
HTML5
CSS3
JavaScript

Backend

Shopify Admin API
Shopify Storefront API
Node.js
GraphQL

Deployment

Shopify CDN
Shopify CLI
Git
Cloud Hosting

1.1K

441

About Us

Contact Us

Careers

Training

Blogs

Script

Webstories

Case Study

Coding Guidelines