Instantly adds nice compression artifacts to your JPEG images
Tags: images
Published: 2023-11-07 07:47:33

---
title: Instantly adds nice compression artifacts to your JPEG images
published: true
date: 2023-11-06 00:32:00 UTC
tags: Images
canonical_url: https://reactjsexample.com/instantly-adds-nice-compression-artifacts-to-your-jpeg-images/
---

# more-jpeg
 ![Instantly adds nice compression artifacts to your JPEG images](https://reactjsexample.com/content/images/2023/11/Code_2023-11_16-27-01.jpg)

more-jpeg is a service designed to intentionally degrade the quality of JPEG images by introducing significant compression artifacts, turning them into ✨ works of _art_ ✨.

## Examples

| Original | 10 | 5 | 0 |
| --- | --- | --- | --- |
| ![Instantly adds nice compression artifacts to your JPEG images](https://user-images.githubusercontent.com/71837281/279541864-04a92ba9-cb79-407c-a666-43c8720f2fc3.jpg) | ![Instantly adds nice compression artifacts to your JPEG images](https://user-images.githubusercontent.com/71837281/279541889-520659a6-a8b4-43bb-b4ad-36669448d671.jpg) | ![Instantly adds nice compression artifacts to your JPEG images](https://user-images.githubusercontent.com/71837281/279541900-ab3a41a0-55eb-40b6-904b-a421fe2c0ba8.jpg) | ![Instantly adds nice compression artifacts to your JPEG images](https://user-images.githubusercontent.com/71837281/279541905-67c71197-8a0a-4530-9abf-86886cea2a13.jpg) |

As you can see, JPEGs with quality `10`, `5` or even `0` look _way_ better than the original.

## Demo

Try it out here: [https://jpeg.qwer.tz/](https://jpeg.qwer.tz/) _(no uptime gurantee)_

# Contributing

## Creating new Recipes

NoteRecipes determine the final export quality of the JPEGs. They also contain a list of “ingredients” that are applied **before** the export (such as inverting an image).

If you want to contribute such new ingredients, please refer to the section [Creating new Ingredients](#creating-new-ingredients).

It is easy to add new recipes, simply append your recipe to the `recipes` object in `src/util/recipe.tsx`. You may use the **Export** button in the frontend to generate recipes.

* * *

## Creating new Ingredients

To create a new ingredient (image operation), follow these steps:

### Backend

First, create a function with the name `action_<ingredient-identifier>` using this signature `(img: Image, options: dict) -> Image`

```
def action\_invert(img: Image, \_: dict) -> Image:
    return ImageOps.invert(img)
```

Then add your ingredient to the `actions` dictionary in `recipe_actions.py`.

```
"invert": {
    "executor": action\_invert,
    # optional, if you have any parameters, specify them here by name + accepted types
    "options": {
        "scale": [float, int]
    }
},
```

### Frontend

In `src/util/recipe.tsx`, include your ingredient within `ingredientMeta`. You will need to specify the following attributes:

- `icon` (ReactNode) – see [react-icons](https://react-icons.github.io/react-icons/icons?name=fa6) for a list of available icons
- `description` (string)

If your ingredient accepts any parameters, also add:

- `param_info` (ParamInfo)

```
invert: {
    icon: <FaFill />,
    description: "Reverses colors in the image",
    param\_info: {
      scale: {
        // will be shown if you hover over the (i) in the ingredient options
        description: "Amount of xyz to add",
        // will be the default value when adding new ingredients
        default: 30,
      },
    },
},
```

## GitHub

[View Github](https://github.com/darmiel/more-jpeg?ref=reactjsexample.com)