LQIP: Share Python code to compress images and convert them to base64 encoding.

[huanyushi]

The author added LQIP (Low Quality Image Placeholder) functionality to the template. See here. We just need add base64 in front matter, e.g.

jekyll-theme-chirpy/_posts/2019-08-08-text-and-typography.md

Lines 11 to 14 in d013c11

	image:
	path: /commons/devices-mockup.png
	lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
	alt: Responsive rendering of Chirpy theme on multiple devices.

Python Code

I have written a Python program that can quickly compress and blur images, and generate base64 encoding. You can adjust it if you need.

from PIL import Image, ImageFilter
import base64
import pyperclip 

def image_lqip(image_path,output_image_path,length=16,width=8,radius=2):
    """
    Generate a Low-Quality Image Placeholder (LQIP) and save it to a file, then return the base64 encoded string.

    Parameters:
    - image_path: Path to the original image file.
    - output_image_path: Path to save the LQIP file.
    - length: Length of the adjusted image, default is 16.
    - width: Width of the adjusted image, default is 8.
    - radius: Radius of Gaussian blur, default is 2.

    Return:
    - Base64 encoded string.
    """
    im = Image.open(image_path)
    im = im.resize((length,width))
    im = im.convert('RGB')
    im2 = im.filter(ImageFilter.GaussianBlur(radius)) # Gaussian blur
    im2.save(output_image_path) # save image

    # Convert to base64 encoding
    with open(output_image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read())
        base64_string = encoded_string.decode('utf-8')
    
    return base64_string

# Example
image_path = "test/test.jpg"
output_image_path = "test/test_blur.jpg"
base64_image = image_lqip(image_path, output_image_path)

pyperclip.copy('data:image/jpg;base64,'+ base64_image) # Copy the result into the clipboard.
print(base64_image)

If you want to view the image encoded in base64, you can also use the following Python program.

import base64

def save_base64_image(base64_string, output_path):
    """
    Save the base64 encoded string as an image file.
    
    Parameters:
    - base64_string: base64 encoded string.
    - output_path: Path to save the image.
    """

    # Decode the base64 encoded string.
    decoded_data = base64.b64decode(base64_string)
    
    # Save the decoded data as an image file.
    with open(output_path, 'wb') as image_file:
        image_file.write(decoded_data)

# Example: the image of the template author.
base64_string = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQgJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAIABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwB1s4jcEmpLtg7ZU0UV9jb3rnwt/csf/9k="
save_base64_image(base64_string, "decoded_image.webp")

End

I hope this is useful. Any suggestions are greatly appreciated.