Introducing TwicPics vs. Imgix

According to HTTPArchive, nearly half of the average web page’s weight consists of images (almost 1 MB). It’s no surprise, given the important role images play in web design and UX. However, the more images we use, and the higher quality they get, the worse it is for your performance metrics. That creates a catch-22 situation for front-end developers who are trying to pull off a balancing act between design and performance.

That’s exactly the type of conundrum that image optimization services can help solve. Below, we’ll look at two popular SaaS: TwicPics and Imgix, and compare them side-by-side.

What is TwicPics: A Quick Introduction

TwicPics is a solution for real-time, context-sensitive optimization of responsive images. It takes your original assets, generates device-adapted versions of them, and serves them via a global CDN cache for optimal performance.

Above all, TwicPics is a developer tool. It empowers front-end developers with the ability to tailor a pixel-perfect version of an image to load for each user, with just a few lines of code. This brings the best possible compromise on image weight and quality - and also simplifies the image management workflow.

To date, TwicPics estimates to deliver over 8.2 billion images and 108 TB of data per month. Despite being a newer competitor on the image optimization scene, TwicPics already has an impressive list of clients. This includes L’Oréal, The Market, Burger King, and Accord Group.

What is Imgix: A Quick Introduction

Imgix used to be a straightforward image CDN for processing and delivering image assets in your web apps.

Recently, Imgix added a visual DAM (digital asset management) system to their platform as well. This consists of a browser-based library to store and manage your assets. This may be a valuable feature for those who don’t yet have a dedicated asset management solution. Assets can be processed, optimized, and delivered via the Imgix CDN straight from this storage system.

In this comparison, we’ll mainly focus on the services’ image optimization capabilities.

How to Set Up TwicPics

To know what to expect, let’s do a quick run-through of how to set up TwicPics:

1. First, create a free account:

2. Once you’ve created your account, you can immediately start configuring a workspace. A workspace is the main organizational unit in TwicPics. Each workspace is associated with a URL domain where your source files are located. So, click “create workspace” to get started:

3. Give your Workspace a name and create a domain. The domain will be used in the URLs for your image assets served via TwicPics:

   Next, you can configure paths under your workspace. This is one of TwicPics’ most handy features from an organizational and asset pipeline perspective. You can create multiple paths under a single workspace that points to different locations or folders where your source assets are stored.

   So, you could have one path pointing to Google Cloud Storage and another to an Amazon S3 bucket. Or, you can create paths to specific files or folders within a single storage location.

   This is useful because you can then create default image manipulations that apply to all images under that path. So, different asset classes can be manipulated differently by default. For example, you can create rules that apply to the folder containing all your product thumbnails to crop or scale them and different manipulations to watermark your trademarked assets.

4. You can create a path simply by specifying the source URL. You can specify folders or sub-paths just by using typical URL syntax. So, if you have a domain https://myimageassets.com, you simply type that in the Source URL field:

   This is all the configuration you need to do for a basic setup. You will now already be able to access and serve assets via TwicPics.

   So, using the above example, you’d be able to access one of your logos via TwicPics using the following URL:

   https://myfirstimages.twic.pics/image-1.jpg

   Now, to see why paths are so powerful, let’s use another example. Let’s say all your logos are stored under a folder called “logos” on the above domain. You can either access them like this:

   https://myfirstimages.twic.pics/logos/logo-1.jpg

   Just by doing this, TwicPics will already start optimizing your assets and accelerating delivery in the background, without you lifting a finger.

5. As an optional step, you can now also configure default manipulations and watermarks for assets under that path. Or, you could decide whether or not to strip metadata or whether to use a canonical URL:

How to Set Up Imgix

Imgix works very similarly to TwicPics, with just a few differences. Imgix doesn’t work with an organizational model like workspaces. Instead, you directly create a source for each location where your assets are stored online:

Configuring a source is pretty simple. All you need to do is select a source type from the dropdown, provide the URL and any authentication (If required), and then name your Imgix that your assets will be served from:

You can also create more Imgix subdomains or custom domains just by clicking the relevant buttons and typing your desired URLs.

Below that, you can create “Asset Defaults,” which is Imgix’s version of TwicPics’ “Default Manipulations. And, below that are optional advanced security and cache settings:

Configuring Asset Sources

Both TwicPics and Imgix offer a variety of ways to connect to your original source images, wherever they are stored on the web. They just go about it in somewhat different ways.

When you set up a source in Imgix, you can choose between Web Folder, Amazon S3, Google Cloud Storage, Microsoft Azure, and Web Proxy. Each source type may have different configuration fields, depending on the service’s naming conventions and authorization protocols.

On the other hand, TwicPics first asks for the source’s URL. It then gives you the option to select and configure a source authentication method. TwicPics provides options for basic authorization (password protection), Bearer tokens, and Amazon AWS S3 signatures.

In effect, this allows you to securely connect to the most popular cloud storage services, the same as Imgix. TwicPics offers one source that Imgix does not - a Connector for Akeneo, a popular PIM (Product Information Management) solution.

You can also specify an asset fallback or default URL for both TwicPics and Imgix in case the intended asset isn’t available for whatever reason.

Another handy feature is that both allow you to configure default image manipulations on a source-by-source basis. Both allow you to chain as many transformations as you want this way. This has the potential to save you a lot of time and effort down the line, as universal transformations don’t have to be implemented in your apps.

For example, one useful transformation to implement this way is watermarking images.

Last but not least, both allow you to secure your URLs by hiding them from the public. This prevents others from abusing your CDN and transformation quotas or serving your assets in their apps or websites.

The other differences between the two aren’t too consequential. TwicPics allows you to preserve all metadata for assets from a source and configure custom source request headers. On the other hand, Imgix allows you to configure cache behavior using the UI.

From a logistical standpoint, TwicPics offers an easy and effective way to handle multiple sources using paths. For example, you can specify many paths to different sources (or sub-levels within the same source) using the same TwicPics subdomain. Or, use a catch-all placeholder to create arbitrary slugs on the fly. This is useful if you want to create contextually meaningful slugs that are more user and SEO-friendly.

Integrations and Plugins

Both TwicPics and Imgix can be integrated with virtually any web app. All you need to do is replace your current image URLs with the corresponding asset URL via your TwicPics or Imgix subdomain.

This basic implementation will already allow you to utilize either service’s considerable image processing capabilities via their URL-based transformation APIs. However, both TwicPics and Imgix have also developed native integrations that offer a greater range of adaptive optimization capabilities.

The whole TwicPics philosophy is that image processing, manipulation, and presentation are front-end design concerns. As a result, they offer native integrations for popular front-end web development frameworks, such as:

• Angular
• React, Gatsby and Next.js
• Svelte (version 3)
• Vue.js (version 2), Vue.js (version 3), Nuxt.js (version 2) and Nuxt.js (version 3)

This is made possible through Twicpics Components, a collection of native web components. A developer familiar with any of the JS frameworks will find manipulating images using the TwicPics’ components effortless. The automatic optimizations include responsive images resizing according to each user’s CSS context, low-quality image placeholders and lazy-loading.

For websites not using these frameworks, TwicPics offers a small, unobtrusive JavaScript helper. And, TwicPics also features a SFCC cartridge and a no-code WordPress plugin.

Imgix sees itself more as a language-agnostic solution that caters to back and front-end developers. It offers a large variety of back and front-end SDKs. The core libraries simply implement the ability to automatically generate Imgix URLs, securely sign URLs, manipulate images, and apply some basic transformations.

Imgix’s framework libraries are slightly more advanced and can also automatically implement adaptive optimizations, such as responsive syntax, LQIPs, and lazy loading. These libraries are available for:

• JavaScript
• React
• Ruby on Rails
• Jekyll
• Vue
• Gatsby
• Ember
• Angular

These are completed by some utility libraries that could embed various functionalities into your app. The list includes Drift for zoom-on-hover functionality, Luminous for a JavaScript image lightbox, and a custom video element.

Imgix also has plugins for Magento, SFCC, Contentful, Nuxt and Wordpress. However, the functionality of these differs from plugin to plugin, and some are rather complex to set up.

Adaptive Image Optimization

CDN delivery

As both ImGix and TwicPics include an image CDN functionality, you should expect some immediate performance improvements simply by serving your image assets via one of these services.

Both services cache assets at various locations, so that they are served from a location as close to each end user as possible.

TwicPics global delivery infrastructure is spread across 89 different cities and 47 countries. On the other hand, Imgix leverages Fastly’s CDN with 56 locations globally.

Choice of optimal format, metadata stripping

By default, TwicPics will strip metadata and serve images in the optimal format (like the efficient WebP format, if supported by the browser). Imgix, on the other hand, will only strip metadata by default.

However, both really unleash their maximum optimization powers through custom integrations with native apps and frameworks. That’s what we’ll look at more below.

Responsive Resizing

As we touched on earlier, both Imgix and TwicPics offer a similar solution when it comes to the challenge of responsive and adaptive image resizing. The solution is installing a small, native applet that automatically generates responsive syntax using srcset attributes for picture and video elements. For frameworks like React and Angular, they will do the same using native components.

This frees developers from the complexity of having to implement responsive syntax themselves.

What’s more, both go beyond just using breakpoints to deliver images at responsive sizes. They are truly adaptive, taking into account factors like the DPR and CSS styling to perfectly adapt images for a large variety of scenarios. For example, scaling up assets to maintain visual integrity on retina devices. Both will also analyze the CSS sizing context in order to preserve aspect ratio and follow your intended art direction.

Since the image CDN can generate and deliver resized assets on the fly, there is no need to maintain separate image variants in your project files or asset management solution.

Low-Quality Image Placeholders and Lazy Loading

Another important performance factor that strongly impacts the user experience, as well as your performance signal for search rankings, is CLS (Cumulative Layout Shift). Simply put, this metric determines your web page's stability while loading.

For example, sometimes elements can jump around, and the layout unexpectedly shifts as new elements are fetched and rendered, usually large images.

One way to ensure this doesn’t happen is to make sure that the image container is preserved throughout the loading process. However, that might mean that your web page sits there with a big, ugly blank spot while the image is being fetched and rendered.

To do this as efficiently as possible, you can display a low-quality placeholder with a much smaller file size in the original image’s place. This will provide visitors with visual interest and a clue about what content is rendered instead of just whitespace.

Both the TwicPics and Imgix scripts will ensure that an appropriate LQIP is generated and displayed as the app waits for the original image to load.

It’s also best practice to lazy-load images below the fold so that it doesn’t delay the immediately visible content to the visitor. Once again, both TwicPics and Imgix deliver automatic lazy-loading functionality with their native libraries.

So, when it comes to improving your CLS scores and providing more comfortable user experiences at loading time, both Imgix and TwicPics do the job. The main difference between the two is what happens after the fact.

TwicPics gives you greater control over how elements behave during this crucial time. The script will automatically apply certain CSS classes to elements that can be used to add CSS effects or styling to elements as they load. Here are some of the available options:

• twic-loading
• twic-done
• twic-error
• twic-poster-loading
• twic-poster-done
• twic-poster-error
• twic-background-loading
• twic-background-done
• Twic-background-error

For example, you can link a fade-in effect with the “twic-done” CSS class or some kind of visual queue to fail gracefully if there is an error.

Another powerful feature of the script is anticipation. This allows you to control exactly when below-the-fold images are lazy loaded in order to provide a seamless user experience.

Automatic image formats

Content negotiation is one of the most important aspects of image optimization. Not only do different user contexts (device, OS, browser, or combination of) support different formats, but different formats perform optimally under different contexts.

Straight out of the box, Imgix doesn’t offer any automatic content negotiation. Should you simply serve images using Imgix, it will pass them through in the original format, regardless of the user context. That means for every image in your apps, you’ll either need to configure a preset or modify the URL to request the image in a different format.

On the other hand, TwicPics will, by default, automatically select the best format based on the user context to convert and serve the image in that format. In most cases today, the image will be served in WebP.

WebP is a next-gen image format considered the optimal choice for performance under most conditions. WebP is particularly efficient when replacing PNGs (as the format also supports transparency) and GIFs.

Both also support an auto format output transformation using the URL API. Using this operation, both will serve the image in the optimal format for the user context, overriding whatever is defined in the preset or default manipulations.

Imgix supports a slightly larger variety of file formats than TwicPics, theoretically giving it more flexibility. However, TwicPics still supports all the most important and widely used file formats you’re likely to come across today, so the differences are minimal. Importantly, both support AVIF, another next-gen file format that’s rising in popularity but doesn’t enjoy universal support just yet.

However, TwicPics has another advantage over Imgix in that it uses automatic adaptive compression. TwicPics will automatically compress images as much as possible efore serving them while trying to maintain visual quality. Imgix has a similar auto=compress function. But, once again, it needs to be manually called for each image.

If you do specify a specific file format, but it’s not supported in the user context, both CDNs are also smart enough to select an appropriate fallback format.

• Automatic layout-driven sizing & cropping
• Lazy Loading out of the box
• Blazing fast, URL based API with transformation chaining
• AI-Powered Smart Crop
• Adaptive Compression
• SEO Optimizations
• Rock Solid Architecture
• Global CDN

Video Optimization

The two services present very different approaches to video optimization.

Imgix isn’t specialized in video delivery, and its video processing capabilities are far behind those for the images. However, Imgix can ingest nearly any video format, including MP4, MOV, AVI, WMV, WEBM, H.264, or MPEG-4. However, it can only encode videos in the HLS or MP4 format for delivery. By default, videos will be served in the HLS format for optimal performance, according to Imgix.

Videos are also delivered via adaptive bitrate streaming (ABS), which should help reduce buffering, even on slow networks.

Imgix also provides an embeddable video player for React, Vue, Angular, and static HTML. The video comes with basic playback controls baked in and can be styled and customized in a number of ways. However, Imgix offers virtually no capabilities to process videos manually, except for specifying the output format and resolution.

The other option Imgix offers is to use GIFs. GIFs can be converted to both MP4 and WEBM files, which tend to be smaller in byte size. The rendering API also features a number of animation controls, such as fps, frame selection, quality, frame interval, loop, reverse, and skip.

However, the only catch is that animated GIF functionality is only available for Enterprise users.

On the other hand, TwicPics can serve animated content in GIF, MP4, and WEBM formats, although the latter two formats are still in beta.

However, users can leverage the full transformation API to process and serve GIFs on their web apps. This means TwicPics can ingest, serve, and transform GIFs just like any other image asset, including converting them to and from other static image classes.

In most cases where optimization is the primary concern, most will stick to serving bite-size clips using GIFs instead of full-blown videos. This is particularly true when we’re talking about small-size images or short, repeatable clips, such as you’d find in ecommerce thumbnails or product galleries.

Transformations API

Below is a quick comparison table of what both TwicPics and Imgix have to offer when it comes to their image processing and transformation engines:

The difference in approach between the two services is very clear when you look at their transformation APIs. Imgix undoubtedly has the more comprehensive API, in line with its focus on developers.

In particular, it outshines TwicPics regarding art-driven transformations, such as effects and enhancements.

However, when it comes to optimizations, basic transformations, and watermarks they are very similar.

TwicPics does offer some capabilities that Imgix doesn’t. For one, it supports adjusting images for people with various types and levels of color blindness. This is essential for providing user-friendly and accessible browsing experiences on the modern web. It also allows you to control the appearance of LQIPs, whereas you have no control when using Imgix.

Another interesting thing to note is that, unless directed otherwise, TwicPics will automatically try to preserve the most important details of a cropped image in the visible area. Once again, Imgix requires you to activate this feature manually.

TwicPics vs. Imgix: Features Breakdown

Plans and packages

Here’s a quick breakdown of how TwicPics and Imgix compares in terms of pricing schemes:

The two services use different pricing metrics: number of origin images for Imgix, optimized CDN bandwidth for TwicPics. Comparing the two is a subtle task. It’s worth noting that even compared to other image delivery and processing services on the market, Imgix and TwicPics are both some of the more affordable options.

At first glance, Imgix seems attractive for projects with few images but a high traffic. However, there is an important caveat to this. The fine print on Imgix pricing page says: “Excessive bandwidth usage above 100 MB per month per Origin Image included in each plan will be monitored by our team. Customers who need more than this can upgrade or reach out to our sales team about a custom Enterprise Plan.” This could lead to an awkward situation where a small handful of highly requested images triggers your usage limits. This is not a problem with TwicPics, that have an account-wide bandwidth limit.

The other issue is that many of Imgix features are price-gated behind the enterprise package. The video API, GIF support, advanced analytics and reports, and DAM capabilities are only available to enterprise users.

TwicPics pricing is generally more all-inclusive. The quota in free plan is generous enough for virtually any personal project or corporate showcase site. The paid plans also offer overage rates so that you can continue to use the service according to your needs. This means you can continue to use TwicPics even if one of the standard packages doesn’t exactly fit your needs or budget.

TwicPics vs Imgix: Pricing Scenarios

Using real-life usage data for different types of websites, we can draw some pricing comparisons between TwicPics and Imgix.

Overall, the smaller institutional websites might fit in the free plans of both Imgix and TwicPics. The first paid plan of Imgix is somewhat pricey at $75/month, which might be less convenient for the medium-scale websites. For ecommerce projects of any size, TwicPics seems to be the more affordable option.

When Should You Use TwicPics?

TwicPics will likely be the preferred choice if you’re sensitive to the following features:

• Storage-agnostic asset handling.
• Intelligent quality compression and image formatting without manual intervention.
• Pixel-perfect optimization of responsive images for each user’s context.
• An intuitive API and developer-friendly web components.
• Flexible pay-as-you-go pricing, convenient if your usage falls in between what’s offered in other vendors’ pricing packages
• Transparent pricing without any fine print limits
• Video optimization: TwicPics functionality is unmatched when it comes to short product and hero section videos

TwicPics is arguably the more accessible and streamlined option of the two. It’s fair to say that TwicPics provides better image optimization capabilities and developer experience - at a cost of a more narrow scope.

When Should You Use Imgix?

Likewise, there are a number of reasons why you might want to consider Imgix:

• You want to fully optimize and process assets yourself using the URL API.
• You have a smaller number of image sources but many users to manage.
• Ability to visualize your cloud-stored images and edit them programmatically (the DAM functionality)
• You are prepared to go Enterprise should your usage demand it.
• You need to deliver long-form video content (Enterprise only).

One of Imgix’s main selling points is its comprehensive API with over 70 different controls and manipulations. This allows you to extensively control art direction programmatically using the URL API.

Conclusion

The optimal software always starts with the assessment of your needs.

If your main concerns are:

• Page load speed
• Image quality
• Developer experience and time-to-market,

then you might want to choose TwicPics. It’s both more powerful and more affordable as an image optimization solution. It’s also the better choice if you want to make the job easier for your front-end developers, instead of giving them more responsibilities.

If your primary concern is having a single solution for digital assets storage, editing and delivery, as well as video streaming, you might prefer Imgix. It has a rather broad scope. Its API allows developers to extensively customize images within asset URLs – but some would argue that this type of styling is best done offline using image editing software.