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] *.[Jj][Pp][Ee][Gg]; do cwebp "$file" -o "${file%.jpg}.webp"; done
