Using Sirv on WordPress

On this page

WordPress logoThe standard media options for WordPress websites can be quite limiting.

The Sirv plugin changes that, giving you instant control over your media library, helping you deliver images perfectly optimized for the web. Sirv removes the hassle of image management, with a single media library to embed images anywhere online (not just in WordPress). With WooCommerce support, you can leverage Sirv's most powerful features: amazing 360 spins, multiple image zoom effects and product videos to help you increase sales.

Follow the steps below to enjoy 360 spins, zoomable images, responsive images and plain images throughout your WordPress website.

Install Sirv on WordPress

Simply install the plugin from your WordPress admin, with the following steps. Alternatively, download the zip from our official WordPress CDN plugin page.

1. Go to the Plugins section of your WordPress admin and click "Add New":
WordPress Plugins
2. Search for "Sirv":
Search for Sirv in the WordPress plugin directory
3. Install and then activate the plugin:
Install Sirv on your WordPress website
4. Go to the "Settings" page for Sirv:

Sirv for WordPress settings page

5. If you have an active Sirv account, just enter your login details.

Copy S3 details from Sirv to WordPress

If you don't have a Sirv account, you can create it in the plugin itself or by visiting our website.

Copy S3 details from Sirv to WordPress

Congratulations, Sirv is now installed! Your free trial includes 5GB of storage and 20GB of bandwidth.

Configure Sirv

Custom domain

During registration, you have the option to choose a custom Sirv sub-domain that will be associated with your account, like abcwidgets.sirv.com. If you'd like to use your own domain, for example - media.abcwidgets.com, follow these instructions.

Sync your media library with Sirv

Sync media library with Sirv

By default, Sirv will automatically fetch images from your server, when they are requested. This can make the initial first load slightly slow for your visitors. You can synchronize your entire media library with Sirv, for faster user experience.

Choose how to load Sirv

Sirv JS is responsible for lazy loading, responsive imaging, and Sirv Media (Spin, Zoom, Video). You have several options to choose from on how to load it.

How to load Sirv JS

1. Include Sirv on all pages. Choose this if you have problems with the second option.
2. Detect. Sirv JS will only be loaded on pages that use Sirv features. Recommended option.
3. No pages. Choose this if you are going to implement Sirv JS by yourself and know what you're doing.

You can also choose which version of Sirv JS to load.

Choose Sirv JS version

1. Original. This is Sirv JS v2, battle-tested and stable as a rock.
2. Original light. Sirv JS v2, but without 360 spin support. Use this if you only need to speed up your WordPress website.
3. Latest. Sirv JS v3, the latest and greatest version of Sirv you can find. Create stunning image galleries with 360 spins, videos (hosted on Sirv or YouTube/Vimeo), several kinds of image zoom, and static images. We recommend using this version.

Make use of custom profiles

Enable custom profiles for Sirv in WordPress

Sirv has a neat feature called profiles, which allows you to change your image settings in bulk. You can apply different settings (quality, watermarks, overlay text and many more) to your featured images (and their thumbnails), as well as any other Sirv shortcodes you create.

Speed up WordPress

Speed up your WordPress website by serving the most optimal image for each user. Sirv automatically converts images (preserving the originals), serving them in the most efficient dimensions and image format (WebP, JPEG, PNG, or PNG). It'll apply compression and other optimizations to minimize file size. For hi-res screens, it'll serve retina images. Finally, it'll cache the images ready for rapid delivery across Sirv's fast global CDN from the nearest of 20 server locations.

Enable the CDN

Sirv has dedicated servers located on all continents, all of your static assets are distributed between them and when your site visitors request them - we load them from the nearest Sirv location. A CDN is vital if you have visitors from all over the world.

Enable the Sirv WordPress image CDN to instantly accelerate your WordPress site:

Enable Sirv CDN for WordPress

All featured images, gallery images, WooCommerce and other plugin embedded images will be delivered by Sirv. Theme and plugin images will continue to be served from your server. Proceed to the next step to find out how to serve all of your static assets with Sirv.
Not only will Sirv serve your images faster, it also takes the pressure off your own server so it can dedicate more resources to serving your other page files faster.

Set up fetching (origin pull) for theme and plugin files

1. Set up fetching in Sirv.
2. Get Wp Super Cache or your plugin of choice that allows to set up an origin pull CDN. Configure the plugin. You're done.

Enable lazy loading

Enable Lazy loading for WordPress

Lazy loading is a technique that defers loading of your WordPress images until they are needed.
Sirv does not simply load images when they're visible in the viewport, it also automatically resizes and optimizes them on-the-fly for fastest load times and the best user experience.
It usually takes milliseconds to process a single image, this technique has proven itself to be the best way to treat WordPress image optimization.

Media management

Uploading media

Upload files to Sirv either from your Sirv account or via your WordPress admin panel: "Sirv" > "Media Library", this is how it looks like:

Upload images via Sirv Media Library

Upload images by clicking the 'Upload images' button

How to upload media to Sirv

Renaming and Deleting media

You can rename and delete media in Sirv Media Library. Simply right-click a file, or click the dropdown menu icon and choose the action you want to do.

Upload images via Sirv Media Library

Using Search

Use the search box to quickly find the files you need.

How Sirv search looks like in WordPress

Add Sirv Media to posts and pages

Sirv supports plenty of media you can embed in your pages or posts:

You can organize your media by using shortcodes.

Gutenberg vs Classic Editor differences

Sirv fully supports both Gutenberg and Classic Editor.
Here's how to add a Sirv Media block in Gutenberg:

Gutenberg and Sirv

And here's how to add Sirv Media in the Classic Editor:

Classic editor and Sirv

Add 360 degree spin to a page or post

Enjoy life-like 360 spins. Display spins on its own or as part of an image gallery.

1. Install Sirv plugin on your WordPress site.

2. Click "Add Sirv Media" button in your page or post:

3. Select 360 spin image in your Sirv Library > Click "Continue":

Select spin image in Sirv Library

4. Configure your 360 spin options and click the "Insert into page" button:

Insert Sirv spin into WordPress page or post

5. The 360 Spin will appear in page/post as a gallery:

Sirv spin appears as a gallery

You can also add additional images to your gallery. Click "Edit gallery" settings icon > Click "Add images" button > Select additional images > Click "Continue" button > Click "Update" button:

Add additional images to Sirv Spin gallery

8. Your spin is now fully interactive in your page/post.

Add zoomable images to page or post

Visitors love seeing close-up detail of any image. The larger your original images are, the deeper the zoom.

1. Install Sirv plugin on your WordPress site.

2. Click the "Add Sirv Media" button in your page or post.

3. Select images to be zoomed > Click "Continue":

Select zoom images in Sirv Library

4. Choose "Zoom Gallery" & Click "Insert into page" button:

Insert Sirv zoom into WordPress page or post

5. Zoomable images will appear in page/post as a gallery:

Sirv zoomable images appear as a gallery

6. To update gallery settings click "Edit gallery" icon:

Update Sirv Zoom gallery settings

Add responsive images to page or post

A single image or a gallery of images can be added without the zoom effect. The image(s) will be optimized and resized on-the-fly. They will load fast and will look perfect on any viewing device.

1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select images you want to be responsive > Click "Continue":

Select responsive images in Sirv Library

4. Select "Responsive image" option, configure your settings and click "Insert into page" button:

Insert Sirv responsive images into WordPress page or post

You can set the maximum width of your images, whether to show the caption or not.
Lazy loading will automatically resize and optimize your images for the perfect user experience.

5. Responsive images will appear in page/post as image embeds.

Add a static image to a page or post

If you'd like more control over your images, you can load regular static images from Sirv.

1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select image from your Sirv Library > Click "Continue":

Select image from Sirv Library

4. Select "Static image" option > Click "Insert into page" button:

Insert Sirv image into WordPress page or post

5. The images will appear in your post or page just like regular WordPress images would. You can go to the 'Text' tab in your editor and apply different transformations like changing size, contrast, sharpness, and many more.

Add a video to a page or post

1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select your video (or videos) and click 'Continue'.

Insert Sirv video into WordPress page or post

4. Configure video options and click 'Insert into Post/Page'

Insert Sirv video into WordPress page or post

Sirv shortcodes explained

Sirv shortcodes are a convenient way to reuse and embed image galleries and 360 spins.
Whenever you add Sirv media and create an image gallery, 360 spin, image zoom, or a 'zoom gallery', they will be saved in the 'shortcodes section' of Sirv settings.

Sirv shortcodes

You can add more shortcodes from this setting section too.

When editing a post or a page, you can easily add shortcodes to posts or pages by going to Add Sirv Media -> Select 'Choose shorcode' tab -> Insert Shortcode.

how to insert a Sirv shortcode

By default, WordPress asks you to choose featured images from your Media Library. You can use the 'Featured image from URL' plugin to choose featured images from your Sirv account or by simply entering the image URL.

How to use Sirv for featured images

This will allow you to use your Sirv Media as featured images for posts and WooCommerce products.

Add Sirv to WooCommerce

Add a beautiful Sirv gallery to your products. It will replace the original WooCommerce (or your custom themes') product gallery. Here's a live demo:

It supports static images, 360 spins, videos hosted on Sirv, YouTube and Vimeo.

Installation

1. Install Sirv plugin.
2. Go through the initial configuration.
3. Configure WooCommerce options.

Sirv WooCommerce settings

3.1 Enable 'Sirv Media Viewer', this will enable Sirv's product gallery for your products.

how to enable Sirv JS 3 in WooCommerce

3.2 Select where Sirv media should appear, before, after your WooCommerce product images, or you can choose to show only images hosted by Sirv.

Sirv JS settings in WooCommerce

3.3 Select how you'd like to handle your product variation images, you can show all images (product gallery + all variation images), or to show only images of the chosen variation.

Sirv for WooCommerce variation images settings

You can also choose which profile to apply to your product images.

Add Sirv Media to the product gallery

You can add static images, 360 spins and videos as a part of your product image gallery. Here's a short video showing how to do it:

To add a gorgeous Sirv Gallery to your product images, follow these steps:
1. Find the Sirv Gallery box in your product editing screen. Then click the 'Add Sirv Media' button.

Add Sirv Media

2. Choose media you'd like to add to your product and click the 'Add images' button.

Add images button location

That's it! Here's how it'll look in the admin section:

Sirv product image gallery preview

Add Sirv Media to product variations

Each variation can have its own set of Sirv Media. The process is almost identical to adding images to the main product gallery, You can add product videos, static images and 360 spins. Here's a quick video explaining how to add Sirv Media to product variations:

Add YouTube or Vimeo videos to WooCommerce products

YouTube or Vimeo videos can be added to both the main product image gallery and product variation media.
Click on the 'Add online video' button and paste your video URL.

At the moment, videos from YouTube and Vimeo are supported. If you'd like to add a video hosted on Sirv, just add it like you would add an image or a spin.

Add a featured product image hosted on Sirv

If your product images are stored only on Sirv and not in WordPress, you might find it tricky to add featured images. To solve this problem, you can use the 'Featured image from URL' plugin to add Sirv Media as your featured product image. It'll look like this:

featured product image from URL in WooCommerce

Help from a Sirv expert

If you have any questions about how to use the Sirv for WordPress plugin, please contact our support team from your Sirv account.

Was this article helpful?

Get help from a Sirv expert