Images

Dimensions Link

Two versions of each image may be required:

• Large
  Original image that will be displayed in project section. Average length of 900px on longer side is sufficient in most cases for large images.
• Thumb
  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.

Naming Link

Following conventions must apply:

1. 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.

2. no empty spaces

   Don’t use empty spaces in image names. Use dash - or underscore _ 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.

Organizing Link

Create sub-folders in /img/ folder for each portfolio project or html page. Copy your images to respective sub-folders:

website/
  img/
    portraits/
      portrait_01.jpg
      portrait_01_thumb.jpg
      portrait_02.jpg
      portrait_02_thumb.jpg
      portrait_03.jpg
      portrait_03_thumb.jpg
      ...
    street/
      street_01.jpg
      street_01_thumb.jpg
      street_02.jpg
      street_02_thumb.jpg
      street_03.jpg
      street_03_thumb.jpg
      ...
    ...

    

× × ×

Learn next: Introduction