more-jpeg

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

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/ (no uptime gurantee)

Contributing

Creating new Recipes

Note

Recipes 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.

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

You will need to specify the following attributes:

name (string) - A name for your recipe
description (string) - A description for your recipe
destroy_factor (uint) - A rating from 0 (no destruction) to 100 (much destruction) how much the image is destroyed
quality (uint) - The JPEG export quality from 0 (compression artifcats' dream) to 100 (no compression artifacts)
ingredients (Ingredient[]) - A list of ingredients for the recipe
preview (string) - Path to a preview (you should put it in the frontend/public/examples directory)

{
    name: "Noise",
    description: "Adds a little bit of noise",
    destroy_factor: 15,
    quality: 95,
    ingredients: [{ 
        id: "exponential_noise", 
        with: { scale: 30 }
    }],
    preview: "/examples/noise.jpeg",
},

Creating new Ingredients

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

Backend

First, in recipe_actions.py 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 frontend/src/util/recipe.tsx, include your ingredient within ingredientMeta. You will need to specify the following attributes:

icon (ReactNode) - see react-icons 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,
      },
    },
},

darmiel/more-jpeg