FLAKE : chisel your photos

Many images you see on the Internet today have undergone compression for various reasons. Image compression can benefit users by having pictures load faster and webpages use up less space on a Web host. Image compression does not reduce the physical size of an image but instead compresses the data that makes up the image into a smaller size.

Image compression is typically performed through an image/data compression algorithm or codec. Typically such codecs/algorithms apply different techniques to reduce the image size, such as by:

Specifying all similarly colored pixels by the color name, code and the number of pixels. This way one pixel can correspond to hundreds or thousands of pixels.
The image is created and represented using mathematical wavelets.
Splitting the image into several parts, each identifiable using a fractal.

Here's why:

Quality progressive or layer progressive: The bitstream successively refines the reconstructed image
Resolution progressive: First encode a lower image resolution; then encode the difference to higher resolutions
Component progressive: First encode grey-scale version; then adding full color.

How to Save and Optimize Images for Web Performance?

The key to successful image optimization for web performance is to find the perfect balance between lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

Image file format (JPEG vs PNG vs GIF) Compression (Higher compression = smaller file size) Image Dimensions (height and width) By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more details.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only.

For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.

Although it’s a bit manual, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them. Many beginners and even large corporations prefer to use these image optimization plugins because it’s easy and convenient.

We will share more about these WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.

Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using an image editing software on your computer.

For example, we optimized a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.

We chose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Best Image Optimization Tools and Programs As we mentioned earlier, most image editing software come with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, specially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantee the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for the web. Simply open your image and click on the “File » Save for Web” option.

This will open a new dialog box. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom left.

flake

chisel your photos
Explore the docs »

Issues · Pull Requests . Commits .

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Roadmap
Contributing
License
Contact
Acknowledgements

About The Project

Image compression is typically performed through an image/data compression algorithm or codec. Typically such codecs/algorithms apply different techniques to reduce the image size, such as by:

Specifying all similarly colored pixels by the color name, code and the number of pixels. This way one pixel can correspond to hundreds or thousands of pixels.
The image is created and represented using mathematical wavelets.
Splitting the image into several parts, each identifiable using a fractal.

Here's why:

Quality progressive or layer progressive: The bitstream successively refines the reconstructed image
Resolution progressive: First encode a lower image resolution; then encode the difference to higher resolutions
Component progressive: First encode grey-scale version; then adding full color.

Getting Started

Let's Start

Prerequisites

This is for how to list things you need to use the software and how to install them.

npm
```
npm install -g
```

Installation

Clone the repo

git clone https://github.com/palacharlanarendra/download-me

Install NPM packages

npm install

npm install ytdl-core@latest

yarn add ytdl-core@latest

Usage

In many situations we are not able to download the videos from youtube. So, here we are.

Open the terminal and navigate to the project folder where the code.js file is visible.
Execute node code.js command.
Run the localhost:5000 in the browser.
Select the image which you want to reduce.
click on the submit and email it will sent to your email address with reduce size

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AddFeature)
Commit your Changes (git commit -m 'Add some AddFeature')
Push to the Branch (git push origin feature/AddFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

venkatavindra p v -

Narendera Palacharla -

ravindra shasthri -

Project Link: https://github.com/your_username/repo_name