From JPG to WEBP: Image Resizing and Conversion Made Easy

Greem
2 min readOct 18, 2024

--

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
  • The size of an image depends on its intended use:
  • Background images: For desktop, a background image should be 2560 x 1400 pixels. For mobile, it should be 360 x 640 pixels.
  • Hero images: For desktop, a hero image should be 1280 x 720 pixels. For mobile, it should be 360 x 200 pixels.
  • Website banners: For desktop, a website banner should be 1200 x 400 pixels. For mobile, it should be 360 x 120 pixels.
  • Blog images: For desktop, a blog image should be 1200 x 800 pixels. For mobile, it should be 360 x 240 pixels.
  • Logos: For logos, a square ratio of 1:1 or a rectangle format of 2:3 is recommended. For desktops, logos should have a 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

--

--

No responses yet