Two versions of each image may be required:
Original image that will be displayed in project section. Average length of 900px on longer side is sufficient in most cases for large images.
Smaller version of image for thumbnails section. Average length of 320px on longer side is sufficient in most cases for thumbnails.
Thumb images are required only if you use thumbnails section.
Thumb image doesn't need to be exact small replica of larger image — apply art direction during exporting image from image editor and apply creative crop if necessary.
It's strongly recommended to optimize your images for web by applying jpg compression during image export. Reducing file size is crucial for faster image loading and smoother user experience.
Following conventions must apply:
use suffix “_thumb”
Thumb image must have the same name as large one with suffix “_thumb” at the end of the file name:
- photo.jpg (large)
- photo_thumb.jpg (thumb)
Thumb images, with suffix “_thumb”, are required only if you use thumbnails section.
no empty spaces
Don’t use empty spaces in image names. Use dash
_as word delimiter:
- my image.jpg //bad
- my_image.jpg //good
- my_image thumb.jpg //bad
- my_image_thumb.jpg //good
Take a look at
/img/ folder in your foliodot download — placeholder images are using the same naming convention.
Create sub-folders in
/img/ folder for each portfolio project or html page. Copy your images to respective sub-folders: