Using Sirv on WordPress
The 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":
2. Search for "Sirv":
3. Install and then activate the plugin:
4. Go to the "Settings" page for Sirv:
5. If you have an active Sirv account, just enter your login details:
If you don't have a Sirv account, you can create it in the plugin itself or by visiting our website:
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
Sirv will automatically fetch images from your server, when they are requested. You don't need to take any action - it'll just happen naturally.
It's very fast - each image usually syncs within 1 second - but if your server is slow, the initial load for the first ever user might feel delayed. If so, synchronize your media library in advance, for a 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.
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.
1. Original - this is Sirv JS v2, battle-tested and stable as a rock.
2. Original light this is Sirv JS v2, but without 360 spin support. Use this if you only need to speed up your WordPress website.
3. Latest - this is Sirv JS v3, the latest and greatest version of Sirv you can find. Create stunning image galleries with 360 spins, videos (from Sirv, YouTube or Vimeo), several kinds of image zoom, and static images. We recommend using this version.
Make use of custom profiles
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.
CDN automatically enabled
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.
Sirv WordPress image CDN is automatically enabled to instantly accelerate your WordPress site.
All featured images, gallery images, WooCommerce and other plugin embedded images are 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.
Should you wish to disable the CDN (not recommended), change 'Enable CDN' option to 'No' in your account:
Set up fetching (origin pull) for theme and plugin files
1. Set up fetching in Sirv.
2. Get WP Super Cache or another plugin that allows adding an origin pull CDN.
3. Configure the plugin. You're done.
Enable lazy loading
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:
Upload images by clicking the 'Upload images' button:
Renaming and deleting media
You can rename and delete media in your Sirv media library. Simply right-click a file, or click the dropdown menu icon and choose the action you want to do.
Using search
Use the search box to quickly find the files you need.
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:
And here's how to add Sirv media in the Classic Editor:
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 the 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":
4. Configure your 360 spin options and click the "Insert into page" button:
5. The 360 Spin will appear in page/post 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:
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, then click "Continue":
4. Choose "Zoom Gallery" and click the "Insert into page" button:
5. Zoomable images will appear in page/post as a gallery:
6. To update gallery settings click "Edit gallery" icon:
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":
4. Select the "Responsive image" option, configure your settings and click "Insert into page" button:
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":
4. Select "Static image" option > Click "Insert into page" button:
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':
4. Configure video options and click 'Insert into Post/Page':
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.
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.
Featured images and Sirv
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.
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
2. Go through the initial configuration.
3. Configure WooCommerce options:
3.1 Enable 'Sirv Media Viewer', this will enable Sirv's product gallery for your products:
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:
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:
To automatically add media to your gallery, upload it to your Sirv account using a predictable folder naming rule. Choose either folder names that match the WooCommerce product ID or product SKU. Those two unique values can be found in your WooCommerce product list:
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.
2. Choose media you'd like to add to your product and click the 'Add images' button.
That's it! Here's how it'll look in the admin section:
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:
Instead of YouTube/Vimeo, you can add a video hosted in your Sirv account. Just add it like you'd add an image or 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:
Sirv media without syncing your WordPress media library
It's possible to deliver WooCommerce product imagery from your WordPress server and Sirv content from Sirv, without syncing your WordPress media library to Sirv. Your WordPress images won't be zoomable or served in next-gen formats or delivered optimised by Sirv CDN but it will reduce your Sirv storage.
To do that, choose these settings in the Sirv plugin:
- Network status: Disabled
- Sirv Media Viewer: Enabled
Troubleshooting
Using Sirv with WP Rocket
The Sirv plugin works well alongside the WP Rocket plugin, to improve page optimisation. However, the options to "Load JavaScript deferred" and "Delay JavaScript execution" will prevent sirv.js from loading on page load, which can cause missing images. To solve this:
1. Navigate to the "File Optimization" section of your WP Rocket settings:
2. If you've enabled the "Load JavaScript deferred" and "Delay JavaScript execution" options, be sure to exclude https://scripts.sirv.com/sirvjs/v3/sirv.js from the list, like so:
3. Then save those changes.
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.