From JPG to WEBP: Image Resizing and Conversion Made Easy

Recommended image sizes online

File size

• Images should be no larger than 1 MB, and most small images can be 300 KB or less. Larger images can slow down your website’s load time.

Image dimensions

Responsiveness:

• aspect ratio 4:3 / 1600 x 1200 /
• aspect ratio 3:2 /1620w x 1080h / 810w x540h/ 540w x 360h / 900w x 600h / 600w x 400h / 300w x 200h

Background images: (these are all recommended size, they don’t have to be exact.)

• For desktop: 2560 x 1400 pixels.
• For mobile: 360 x 640 pixels.

Hero images:

• For desktop: 1280 x 720 pixels / 1620 x 1080 pixels
• For mobile: 360 x 200 pixels.

Website banners:

• For desktop: 1200 x 400 pixels.
• For mobile:360 x 120 pixels.

Blog images:

• For desktop: 1200 x 800 pixels.
• For mobile: 360 x 240 pixels.

Logos:

• a square ratio of 1:1 or a rectangle format of 2:3 is recommended.
• For desktops: maximum height of 100 pixels.

convert images from .heic to .jpg extension

for file in *.[Hh][Ee][Ii][Cc]; do sips -s format jpeg "$file" --out "${file%.*}.jpg"; done

Change image size with python image processing library, PIL/Pillow

pip3 --version
pip3 install Pillow

python3 // start a python shell
from PIL import Image // verify Pillow installation 
//if not
pip3 install pillow //install pillow library
//or 
brew install pillow

create a python script

import os
from PIL import Image

# Define the folder containing the images
folder_path = '/path'  # Change this to your folder path

# Define new dimensions
target_size = 1500

# Loop through all files in the directory
for filename in os.listdir(folder_path):
    if filename.endswith(('.jpg', '.jpeg', '.png', 'JPG)):  # Add more extensions if needed
        file_path = os.path.join(folder_path, filename)

        # Open the image file
        with Image.open(file_path) as img:
            # Check the orientation and calculate new dimensions
            if img.width > img.height:
                # Horizontal: Set width to target size, adjust height
                new_width = target_size
                new_height = int((new_width / img.width) * img.height)
            else:
                # Vertical: Set height to target size, adjust width
                new_height = target_size
                new_width = int((new_height / img.height) * img.width)
            
            # Resize the image
            img = img.resize((new_width, new_height))
            
            # Save the resized image (you can overwrite or save with a new name)
            img.save(os.path.join(folder_path, f'resized_{filename}'))

print("Resizing complete!")

run the python script

$python3 filename.py

convert images from .jpg to .webp extension

.webp and .avif image files are generally preferred over .jpeg and .png files because they offer high quality while being compressed, making them lighter and optimizing speed. By installing cwebp on our local machine, we can easily create .webp files.

$brew install webp

/*** get to your directory ***/
$cd path/to/your/folder
/*** run this bash command, in this folder, all files with .jpg create .webp files ***/
$for file in *.[Jj][Pp][Gg]; do cwebp "$file" -o "${file%.jpg}.webp"; done