Handling user image uploads is a staple of modern web applications. Whether it's uploading profile pictures, service logs, or tutorial attachments, users expect images to show up instantly and display correctly. However, developers frequently encounter two classic mobile-upload bugs:

1. EXIF Rotations: Photos uploaded directly from iPhones or Android devices look correctly oriented on the phone but end up rotated 90 or 180 degrees when rendered on the web.
2. PNG Transparency Glitches: Converting transparent PNG images to highly compressed JPEG/WebP formats often replaces transparent areas with ugly, solid black blocks.

In this post, we'll explore how to write a robust image-processing pipeline in Python using the Pillow library to solve both issues while generating highly compressed, modern WebP images.

Bug 1: Fixing EXIF Phone Rotations

When you snap a photo, mobile cameras save raw image buffers in one fixed orientation and append a hidden metadata tag (EXIF) telling the phone's rendering engine how to rotate the image (e.g. "rotate 90 degrees counter-clockwise"). Most web browsers and HTML rendering tags ignore this tag, leading to rotated images.

To fix this, we must inspect the EXIF tag during the backend image upload flow, physically rotate the image pixels to match the metadata instruction, and strip the EXIF tag before saving. In Pillow, this is handled through the ImageOps.exif_transpose helper:

from PIL import Image, ImageOps
import io

def fix_exif_rotation(image_file) -> Image.Image:
    """
    Reads an uploaded image and transposes pixels to match camera orientation metadata.
    """
    img = Image.open(image_file)
    
    # Automatically transpose pixels to match EXIF orientation tags
    normalized_img = ImageOps.exif_transpose(img)
    return normalized_img

Bug 2: Blending PNG Transparency Safely

Standard PNG files contain an alpha channel representing transparency (RGBA). If you try to save an RGBA image directly to WebP or JPEG (which expect standard RGB), the alpha channel is dropped, which can result in transparent areas rendering as pure, solid black blocks.

To avoid this, we must detect if an image contains transparency, construct a solid background color layer (typically white), and overlay/composite the transparent image onto it before saving:

def blend_transparency(img: Image.Image) -> Image.Image:
    """
    Detects transparency and composites the image onto a solid white background.
    """
    # Check if the image contains alpha channels (transparency)
    if img.mode in ('RGBA', 'LA') or (img.mode == 'P' and 'transparency' in img.info):
        img = img.convert('RGBA')
        
        # Create a new white background image of the exact same size
        background = Image.new('RGBA', img.size, (255, 255, 255, 255))
        
        # Perform composite overlay
        blended = Image.composite(img, background, img)
        return blended.convert('RGB')
        
    return img

Step 3: Building a Complete Compression Pipeline

Now, let's assemble a complete, production-ready compression function. It will take an uploaded image, fix mobile rotation, blend transparent channels, resize it to fit standard bounds, compress it to the highly-efficient WebP format, and return a clean in-memory buffer:

def process_and_compress_image(image_file, max_size=(800, 800), quality=80) -> io.BytesIO:
    """
    Processes, normalizes, resizes, and compresses an image to WebP format in memory.
    """
    # 1. Open and fix rotation
    img = Image.open(image_file)
    img = ImageOps.exif_transpose(img)
    
    # 2. Handle transparency
    img = blend_transparency(img)
    
    # 3. Resize maintaining aspect ratio
    width, height = img.size
    if width > max_size[0] or height > max_size[1]:
        ratio = min(max_size[0] / width, max_size[1] / height)
        new_size = (int(width * ratio), int(height * ratio))
        img = img.resize(new_size, Image.Resampling.LANCZOS) # High-quality downsampling
        
    # 4. Save to in-memory buffer as WebP
    output_buffer = io.BytesIO()
    img.save(output_buffer, format='WEBP', quality=quality, optimize=True)
    output_buffer.seek(0)
    
    return output_buffer

Media Delivery Best Practices

1. Ditch JPEGs for WebP: WebP files are typically 30% to 50% smaller than JPEGs at identical visual qualities, reducing GCS/S3 hosting costs and boosting page load speeds (Core Web Vitals).
2. Run In-Memory: Always perform Pillow processing in-memory using io.BytesIO instead of writing temporary files to server disks, preventing disk leaks and permission conflicts.
3. LANCZOS resampling: When resizing images, use Image.Resampling.LANCZOS to prevent pixelation and maintain high-fidelity details in dynamic previews.

By implementing EXIF transposition and alpha blending composites inside your upload pipeline, you can guarantee that all user images display beautifully, in the correct orientation, and load at lightning speeds on all devices.