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