Introducing TwicPics vs. Kraken

That leaves you with only one question: which image optimization strategy to implement?

If you’ve had anything to do with this, you know that image optimization is a multi-faceted discipline with many potential pitfalls. Traditional techniques, like manually editing images or optimizing images in code are too time-consuming, inflexible, and unscalable.

While they take drastically different approaches, companies like TwicPics and Kraken aim to help website owners by taking the burden of image optimization of developers and designers.

However, in practice, they solve different problems. And, it’s important to understand their different capabilities and real-world applications to choose the right one for your use case.

What is TwicPics: A Quick Introduction

TwicPics is a Responsive Image Service Solution (SaaS), provides real-time, context-sensitive, and on-demand image generation.

As an image CDN, TwicPics takes care of everything related to optimizing your image assets and delivering them to your website visitors. Simply connect it to your storage solution, activate it by adding a simple script to your website files, and voila. TwicPics offers on-the-fly image optimization by analyzing the user & CSS context, generating a perfectly optimized version of the image, and serving it to the user.

TwicPics is still an up-and-coming competitor but has worked with some big-name companies, including This includes L’Oreal, The Market, Burger King, and Camaïeu.

What is Kraken: A Quick Introduction

Kraken.io is a robust, ultra-fast image optimizer and compressor for bulk processing image files.

You can either upload your images using the visual interface or via API calls in your web projects. Kraken process and optimizes your images in the cloud using best-in-class algorithms, and makes them available for download. You can then save and use the optimized image files in various projects, including optimizing your website performance.

Some of the biggest companies in the world have used Kraken, including Microsoft, Tesla, GoDaddy, and Dell.

How to Set Up Kraken

There are basically two different ways to use Kraken to optimize your images:

1. Via the Web Interface PRO dashboard
2. Installing Kraken’s official integration libraries into your web project and making API calls.

First, let’s look at how you can use the Web Interface PRO dashboard:

As you can see, the image optimization settings are pretty basic.

You can either upload image files from your computer or import them from Dropbox, Google Drive, or Box. You can also paste the publicly available URL of any image on the web or the URL of a web page. Using the latter, Kraken will automatically pull all images from the web page to Web Interface PRO.

Kraken will automatically start processing the images and let you know when it’s done. The optimized images will be stored using your Kraken.io Cloud Storage but can also be downloaded immediately.

Ok, so now let’s look at how to use Kraken by integrating it with your web project.

There are a number of official SDKs, plugins, front-end build systems, and third-party integrations for Kraken.

Obviously, the exact implementation will differ somewhat from project to project. However, we’ll look at how to integrate Kraken with a Node.js project as an example. The basic process will go something like this:

1. Download and install the relevant Kraken package, plugin, or integration for your web project.
2. Authenticate yourself to the Kraken API using your unique account API key. The API call looks like this:

var Kraken = require('kraken')

var kraken = new Kraken({
  api_key: 'your-api-key',
  api_secret: 'your-api-secret',
})

3. Supply Kraken with your image assets, either via upload or a URL. Below is an example code snippet for an URL upload:

var opts = {
  url: 'http://image-url.com/file.jpg',
  wait: true,
}

kraken.url(opts, function (err, data) {
  if (err) {
    console.log('Failed. Error message: %s', err)
  } else {
    console.log('Success. Optimized image URL: %s', data.kraked_url)
  }
})

4. You can use either of two methods to fetch optimized images from Kraken: wait or callback. These methods should be familiar to most web developers. The main difference in the implementation is that you will set the wait option by including the statement "wait": true in your request.

So, a wait request will look like this:

Request:

{
  "auth": {
    "api_key": "your-api-key",
    "api_secret": "your-api-secret"
  },
  "url": "http://awesome-website.com/images/header.jpg",
  "wait": true
}

And, below is an example of the response you’ll get from Kraken:

Response:

{
  "success": true,
  "file_name": "header.jpg",
  "original_size": 324520,
  "kraked_size": 165358,
  "saved_bytes": 159162,
  "kraked_url": "http://dl.kraken.io/d1aacd2a2280c2ffc7b4906a09f78f46/header.jpg"
}

The variables and their values are pretty self-explanatory. If no savings were made, Kraken will omit all the fields, except for “success”: true and “saved_bytes”: 0. You can find an example of the callback request/response in the official module repo on Github.

Images that are optimized via Kraken using the API are kept on the server for up to 1 hour. The optimized images will now be downloaded and stored in your image asset folders within your project. As an alternative, you can use the API to integrate with and send images to your Rackspace or S3 storage.

How to Set Up TwicPics

As a run-time optimization tool, TwicPics works very differently when setting up image optimization for your project. TwicPics takes a behind-the-scenes approach to image optimization. So, it doesn’t work like Kraken whereby you upload and optimize images using the web dashboard.

Basically, TwicPics pulls your images from a web-based storage location, optimizes and stores them on its servers, and then delivers them live to your website pages on request. TwicPics is also meant to be used with as little initial or ongoing configuration as possible.

Like Kraken, the best way to understand it is to see what setting up TwicPics looks like:

First, you’ll need to head to TwicPics and create an account. They offer a free tier with 3GB of CDN bandwidth a month which is enough for testing purposes or small projects.

After you’ve signed up for TwicPics, it will generate a unique image-serving subdomain for you in the format <sub>.twic.pics:

This is your lifeline to the TwicPics service and what you’ll use to deliver and manipulate images on your web pages, so keep it handy.

The next thing you need to do is provide TwicPics with the source of your image assets. Like Kraken, you can use any publicly available URL, including an Amazon S3 or Google Cloud Storage bucket:

If you only have a single TwicPics domain, the good news is that you can hook up multiple sources to a single domain. All you need to do is use the “Create path” panel above to create a unique path for each source. For example, you can create a path 9lnc3i79.twics.pics/s3 for your S3 bucket and 9lnc3i79.twics.pics/gsc for your GSC bucket.

Once this is set up, you’re halfway done already. You can now request optimized images to be delivered via your TwicPics domain. For example, you can use your browser to load an image called “mountains” stored in your S3 bucket using the following URL:

9lnc3i79.twics.pics/s3/mountains.jpg

Similarly, you could already start replacing the URL in the src attribute of your img tags in your website markup like this:

<img src=”https://9lnc3i79.twics.pics/s3/mountains.jpg” />

Without any additional configuration or input, TwicPics will already use intelligent compression to serve your image assets.

However, to take full advantage of TwicPics’ image optimization process, including automatic resizing, there’s one extra step: copy-pasting the TwicPics front-end script to your HTML.

<script async defer src="https://<sub>.twic.pics/?v1"></script>

To activate the front-end script, simply replace the contents of the src attribute with your TwicPics domain. And, alter your <img> tags to look like this:

<img data-twic-src="image:<path_to_image>" />

Now, when someone loads your web page, it will request the appropriate image via your TwicPics subdomain.

TwicPics also features native-level integration with a number of other front-end web development frameworks, thanks to its Web Components Package. To use the TwicPics web component in your project, all you need to do is install the package and replace your <img> elements with <TwicImg> like below:

<TwicImg src="https://assets.twicpics.com/examples/mountains.jpg" />

As you can see, the process of integrating with TwicPics is far less cumbersome than that of Kraken. Thanks to the front-end script, you’ll also already be benefitting from advanced optimizations, such as lazy loading, responsive resizing, etc. With Kraken, you’ll still need to implement these optimizations manually, but we’ll get into that in more detail later on.

Integrations and Plugins

Kraken.io’s reach is pretty decent when it comes to its official integration libraries. As you can see, it supports some of the most popular web programming frameworks today, including:

• Java
• Ruby
• Node.js
• PHP
• .Net C#
• Python

There are also no-code, native plugins for both WordPress and Magento.

Officially recognized third-party plugins and integrations are also available for:

• Haskell
• Laravel 5
• Drupal, and more

Because of how Kraken works, however, it lacks any run-time integration. All of the above integrations are purely for adding build-time image optimization to your web project.

TwicPics, on the other hand, aims to be as technology-agnostic as possible with support for some of the most popular front-end web development frameworks today. The official TwicPics Components package can be used JavaScript/React-based libraries, 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)
• Web Components

However, because TwicPics utilizes a simple URL-based API, it can seamlessly be integrated with nearly any type of web project.

For developers that use frontend frameworks like React, TwicPics works almost exactly the same. All you need to do is install the package and then change your standard <img> components to <TwicImg> components:

<TwicImg src="https://assets.twicpics.com/examples/twicpics-optimized-image.jpg" />

You can then manipulate images in the same way, using the URL directives.

Manipulating and Optimizing Images

If you have absolutely no technical or web coding experience, then Kraken seems to have the advantage thanks to its visual UI. This allows you to make basic optimizations, such as:

• Choosing between Lossy, Lossless, or Expert (manual) compression
• Resize images by choosing the method (fit, exact, auto, crop, etc.) and specifying the dimensions.

Note, that if you use the resize function that all images you upload will be resized according to the same specifications.

Choosing the “Expert” compression mode will give you some additional optimization settings:

When you integrate Kraken with your project, you can control most of the same settings programmatically. You can instruct Kraken to perform certain optimizations by adding these fields to your request:

• Convert to WebP: webp: true
• Use lossy compression: lossy: true
• Resize: resize: {width: X, height: Y, strategy: ‘crop/exact/fit/etc.’}

To implement responsive syntax, you just create a list of different breakpoints within the resize field and assign each a unique id. You can specify up to 10 breakpoints this way.

Using a URL-based API, TwicPics takes a completely different approach. Basically, it works by issuing TwicPics with commands in the form of parameters in your images’ URL string in the following format:

https://<sub>.spontwic.pics/<path_to_image>?twic=v1/<manipulation>

For example, this is how you would resize an image to have a width of 500px:

https://<sub>.twic.pics/<path_to_image>?twic=v1/resize=500

You can chain transformations simply by appending them to the URL path. Below, for example, we’re cropping the image to a size of 100x100px using the cover method and by centering on the point at 50x50px:

https://<sub>.twic.pics/<path_to_image>?twic=v1/focus=50x50/cover=100x100

As you can see, this is a highly intuitive approach that only requires the most basic level of knowledge regarding HTML. TwicPics have also purposefully used an API syntax that reads as naturally as possible without any cryptic shorthand, codes, or symbols.

Up to this point, you might think that Kraken has the upper hand when it comes to ease of use when manipulating images. However, the flip side is that you have to be involved with optimizing images when using Kraken. In effect, Kraken is little more than a bulk processing tool while you, as the user, have to tell it how and when to optimize images as well as implement any logic related to that.

If image optimization is your main concern, you don’t have to tell TwicPics what to do in the vast majority of cases. Its intelligent optimization engine will already optimize images to the best of its abilities without any user input. You also have to factor in that TwicPics optimization capabilities are far beyond that of Kraken, and we’ll cover this more later on.

However, if you ever need to address any optimization edge cases or apply some art direction, you can do so using the simple URL-based API.

Available Image Optimizations

Ok, so now let’s talk a bit about the customizations that each of these platforms is capable of.

• Resize and crop images: you can resize images while specifying the dimensions, whether or not to preserve the aspect ratio, and whether or not to crop. You can create up to 10 differently sized images to use in responsive syntax.
• Strip metadata: Kraken automatically strips unnecessary image metadata to lower the file size. You can turn this off at your request.
• Quality compression (Lossy, Lossless, Custom): Lossy offers the biggest potential for savings (up to 90%, according to Kraken) with lossless compression offering between 25-34%. Custom quality settings are only possible using Lossy compression.
• Chroma subsampling: this applies only to JPEG images and refers to lowering the chroma resolution. You can read more about it here.
• Format conversion: you can tell Kraken to convert images to WebP in either lossy or lossless format.

And, here are the ways in which TwicPics can optimize image assets:

• Strips unnecessary metadata: Like Kraken, TwicPics automatically strips EXIF metadata by default. This feature can be turned on/off.
• Responsive image resizing and cropping: TwicPics is capable of resizing images on the fly based on the user device as well as the CSS sizing context. It also supports high-DPR/Retina devices. Images are automatically and dynamically resized to a pixel-perfect degree for each unique visitor.
• Lazy loading: The front-end script can automatically apply lazy-loading to below-the-fold images using various strategies, such as by using a fast-loading LQIP (Low-quality image placeholder).
• Adaptive quality compression: TwicPics uses intelligent compression technology to further reduce image payloads while preserving as much visual quality as possible.
• Format conversion: TwicPics will automatically choose the optimal format to convert an image to based on the context. You can also control this behavior using the API.

Of the two, TwicPics undoubtedly has the more impressive optimization capabilities. When it comes to actually reducing image payloads and accelerating delivery, it’s resizing, lazy loading, compression, and format conversion that have the most potential for improving imperformance.

And, in these aspects, TwicPics is just far more advanced than Kraken. For one, TwicPics automatically resizes images based on your CSS layout and the user context. That means that each unique visitor context will result in a uniquely optimized image variant. Kraken does no such thing, it only resizes images based on your pre-defined input. For any dynamic resizing or behavior, you’ll need to program it yourself.

Lazy loading is another performance best practice. TwicPics will automatically delay loading images that are not in the visible portion of the screen. Either reserving a blank space or replacing it with a low-quality placeholder. The TwicPics API gives you pretty fine-grained control over the exact lazy loading behavior.

Once again, you’ll need to program this logic yourself if you use Kraken.

Last, but not least, we get to image format conversion. WebP is currently the most widely-support, next-gen image format that’s able to serve the same image but in a significantly smaller file size than PNG or JPEG. AVIF is the possible successor to WebP that has the potential for even greater savings but is not as widely supported yet. Kraken does not yet support AVIF as an output format, while TwicPics will automatically serve AVIF images to supported devices.

While TwicPics will automatically choose the optimal supported image format and deliver the converted image, you need to specify this behavior with Kraken.

In short, TwicPics main advantage is that it has the intelligence to make run-time decisions about how to optimize images for each context. It can cover a far larger variety of corner cases than simply implementing native responsive syntax with 3 or 4 breakpoints. And, the best part is, that you barely have to give it any input.

Implementing Responsive Images

Using responsive image techniques is one of the best ways to increase performance across a variety of use cases.

So, with Kraken, you need to settle on a responsive image strategy before you optimize your images. You can tell Kraken which to generate a set number of image variants based on your specified dimensions and image breakpoints. However, it will be up to you to actually implement responsive syntax into the markup of your web app.

You also don’t pull optimized images from Kraken “live” at runtime. Instead, you send images to Kraken to get optimized using one of its integration APIs. Once they are optimized, the images are then downloaded back to the project files of your web app.

So, for example, if you upload an image to Kraken for optimization, you’ll need to manually code your resizing strategy into the request:

{
  "auth": {
    "api_key": "your-api-key",
    "api_secret": "your-api-secret"
  },
  "wait": true,
  "lossy": true,
  "url": "https://awesome-website.com/images/header.png",
  "resize": [
    {
      "id": "small",
      "strategy": "fit",
      "width": 100,
      "height": 100
    },
    {
      "id": "medium",
      "strategy": "crop",
      "width": 300,
      "height": 300
    },
    {
      "id": "large",
      "strategy": "square",
      "size": 400
    }
  ]
}

Using this method, Kraken allows you to specify up to 10 differently-sized image variants.

The above code snippet only features 3 image breakpoints. And, this is just to generate your image variants using the Kraken API. You still need to go and actually code your responsive syntax on your website pages.

A very basic responsive image using the srcset attribute may look like this:

<img src="image.jpg" srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w" />

But, it can get far more complex in practice and has to be separately implemented for each image. So, you can imagine it’s not the most elegant solution.

You also need to physically store and manage the image variants, either locally or in the cloud.

Luckily, none of that is strictly necessary when using TwicPics. When you use the front-end script in your web project or install the TwicPics Web Components package, TwicPics will automatically apply responsive resizing to your images. It does so by automatically generating the appropriate API calls for you based on the CSS context of the element as well as the screen size and DPR of the user device.

TwicPics will respect and maintain the aspect ratio you declared for each image at different sizes and contexts. So, for example, if you have an image with a CSS aspect ratio of 16:9 and its dimensions are 1600×900 on a desktop browser, TwicPics will automatically resize it to 1280x720 on a smaller device.

What’s more, all the image variants that TwicPics generates will live on the TwicPics server. So, there’s no need to worry about where and how to organize and store them.

That being said, TwicPics does work well alongside responsive syntax if it needs to. For example, it’s recommended to still use native responsive syntax for above-the-fold images as this is a standard best practice for responsive web pages.

You can see how that works in the documentation:

• You can rely on our Quick Start Guide to help you integrate TwicPics Native in HTML5.
• If you are using JS Framework(s) like React.js, Vue.js, Next.js, Nuxt.js, Angular… Make sure to check the TwicPics Components.

This is a great time and energy saver. It will also keep your code nicely clean, lean, and readable. And, the same goes for your project files.

Image Delivery

This is perhaps one of the biggest differences between Kraken and TwicPics. Kraken works entirely in the background at build time. As such, it doesn’t help you with the delivery aspect when it comes to optimizing images for web performance.

After you upload, process, and download/store your image assets using Kraken, its involvement effectively ends.

It’s up to you to find delivery and caching strategies that will result in even faster loading times for your visitors around the globe.

On the other hand, TwicPics doubles as an image CDN. TwicPics users can leverage its global CDN which consists of a global network of 225 PoPs across 3 processing clusters. These servers are spread throughout all major regions and are located in 89 different cities and 47 countries.

Images and their variants are cached live across all these servers. A CDN greatly accelerates delivery by serving users cached versions of images from the server closest to them. New variants are generated within fractions of a second, so have virtually no impact on the perceivable loading time. However, once a new version of an image is created, it’s cached so that it can be served instantly on an as-needed basis.

And, it uses cutting-edge protocols, like HTTP/3 over Quic, to deliver images faster and more securely. The network’s reliability is backed by a 99.99% uptime guarantee.

Using the API

From this comparison, it might look like TwicPics and Kraken are relatively even. However, for most types of transformations, TwicPics offers a richer set of potential manipulations. For example, by chaining various transformations or creating named/default transformations right in the dashboard.

You can use the same API calls to style and configure individual image placeholders. And, TwicPics allows for more in-depth art direction thanks to aesthetic transformations, like setting a background color, rotating images, zooming, changing the focus, and preventing color quantization when delivering images in the .PNG format.

For some, Kraken’s cropping tools may be more intuitive at first as it uses a more explicit syntax. But, in most ways, it’s a much less flexible API than that of TwicPics.

TwicPics vs. Kraken: Features Breakdown

Here is a quick overview of what transformations or manipulations are possible using the Kraken and TwicPics APIs:

Plans and Packages

Making a direct pricing comparison between Kraken and TwicPics is nearly impossible due to how different the platforms are. Almost the only comparable feature between the two is the amount of raw image data you can process in a month.

With that in mind, here’s a breakdown of Kraken’s pricing:

Kraken also offers a free trial that allows you to test convert up to 100 MB of images. While it’s great to have some kind of free test quota, this is a very small amount that’s unlikely to be enough for any real-world application.

However, the good news is that all features are included with each plan, including Full API Access, Web Interface PRO, WordPress Plugin, Magento Extension, and Kraken.io Cloud Storage.

Now, let’s take a look at TwicPics:

One clear advantage for newcomers, or those on a budget, is that TwicPics has a forever free tier. You can use up to 3GB of CDN bandwidth per month for as long as you want. This is not only enough for testing, but also to run small projects, like a personal blog or small business website.

You also have to keep in mind that TwicPics bases its quotas on CDN bandwidth. This means the total bandwidth used to deliver images after they have been optimized. In most cases, TwicPics can actually reduce image payloads by up to 75% which means that you can actually process about 4x as much in raw image data.

Which is More Cost-Effective: TwicPics or Kraken?

Sure enough, TwicPics’ fixed pricing does start at a much higher price point than Kraken's. However, some basic calculations will show that TwicPics is actually also more cost-effective at smaller scales. The free 3GB quota should cover you past the 5 GB “Advanced” plan from Kraken.

To simplify the calculation, we’ll ignore TwicPics’ ability to compress image sizes. However, in reality, the dollar amount shown could be up to 75% less.

Let’s see what the same allocation from other Kraken plans will cost using TwicPics:

• Premium ($39/month for 15 GB): ~$6 (12 GB overage data @ 0.5€/GB)
• Enterprise($69/month for 60 GB): ~$28.5 (57 GB overage data @ 0.5€/GB)

So, per GB, TwicPics is anywhere from 2x to 6x cheaper than Kraken. At the same time, TwicPics’ overage rates are anywhere between 3x to 10x lower than that of Kraken.

To show you what the difference would look like at scale, let’s imagine 2 TB of image data:

Using Kraken:

• 2 TB - 60 GB = 1.94 TB
• 1.94 TB * $1/GB = $1,940/month

Using TwicPics:

• 2 TB - 1 TB = 1 TB
• 1 TB * $0.3/GB = $300/month

Once again, TwicPics is nearly 6x cheaper to use than Kraken.

Now, Kraken and TwicPics solve different problems.

NOTE: At the time of writing, the conversion rate between Euro and USD is 1:1.04. So, it’s basically 1-to-1.

TwicPics Pricing Scenarios

Now, as a dynamic, real-time solution, there are many more factors and edge cases to consider when looking at real-world scenarios for TwicPics. Below, you can find some usage/cost breakdowns for different real-world use cases:

When Should You Use TwicPics?

To put it frankly, TwicPics blows Kraken out of the water when it comes to optimizing images with an eye on improving website performance. Simply by copy-pasting some code to your website project, you get access to powerful, cutting-edge optimizations like lazy-loading, dynamic placeholders, responsive syntax, and next-gen image formats. Not to mention the fact that TwicPics will deliver your images faster thanks to its global CDN

All, without having to implement an ounce of optimization logic by yourself or bloating up your code.

What’s more, TwicPics has exceptionally cost-effective pricing at all scales. If you look at processing raw image data, it works out cheaper than Kraken across the board.

Unfortunately, TwicPics doesn’t offer a visual interface to upload, manage, and process your images like Kraken. However, if you need to integrate your image optimization solution with your web project, it’s actually simpler to do so at the code level using TwicPics.

The only other shortfall is that there is no immediately available way to download and organize all your image assets. However, that’s not a problem TwicPics is meant to solve. It can connect to nearly any media storage solution and any image derivatives live on its servers - freeing you from this concern.

So, TwicPics is the ideal solution for front-end web developers/designers looking for adaptive, dynamic image optimization for their websites. Plus, a powerful and intuitive API for controlling how images are optimized for, and are presented to, the end-user.

When Should You Use Kraken?

One thing that Kraken offers that TwicPics doesn’t is a fast and easy way to process image files in bulk and on-demand. This is useful for applications where you need to play the same, basic transformations to a large number of image files, such as to give all images in a set the same size, quality compression, or cropping treatment.

So, for example, graphic designers can optimize high-quality images before importing them into Photoshop to keep down file sizes. The same goes for developers.

If you happen to use WordPress, the Kraken plugin offers a greater level of automation by automatically replacing the images in your Media Library. And, WordPress automatically implements some basic form of responsive syntax.

However, it’s not ideally suited to handle the complexity of real-time image optimization and delivery. For example, while it can generate various responsive image sizes for you, you need to provide the logic to do so using the API. You also need to manually implement responsive syntax for the image variants that Kraken creates.

Kraken also lacks lazy loading, dynamic placeholders, and a CDN. What’s more, its pricing plans are more restrictive than that of TwicPics, although it does offer cheaper fixed-cost pricing.

So, in the end, Kraken is best if you actually need physical copies of your optimized images. Or, for those who prefer to purely work with a visual interface to transform their images.

Conclusion

A simple way of putting it is that TwicPics sits between your web app, your storage solution, and the end-user. On the other hand, Kraken only sits between your image storage solution and your web app. Everything that happens after your images are added to your website pages, such as serving them to users and dynamically adjusting them is up to you.