Pictures and Images

General

File Formats and Locations

• Use *.webp format.
  • In rare cases, a *.jpg or *.png file may be smaller. Use your best judgement.
• Image file location:
  • Preferred: Store the image file in an images directory next to the page’s or post’s index.md markdown file.
  • Second Choice: Use the /static/img/ directory (/img/ on the website).

Size Conversions

• ImageMagick command line tools are convenient (and free).
• Installed on Mac computers via brew install imagemagick and then invoked as magick:
  • magick infile.png -resize "1280x" outfile.webp - Resize to 1280-width and convert to *.webp
  • magick infile.jpg -resize "720x" outfile-720x.webp - Resize to 720-width and convert to *.webp
  • magick infile.jpg -resize "360x" outfile-360x.webp - Resize to 360-width and convert to *.webp
  • magick infile.gif -resize "75x" outfile-75x.webp - Resize to 75-width and convert to *.webp

Examples

Publication’s Cover Image

• Typically 720 width, portrait
• Used as featuredImage on publications
• Appears at top of post on the right
• Add {{< clearfix >}} after the image’s related text
• This example: 720x874 pixels, 19.5 Kb webp

{{< img/float-end "images/ManBehindTheCurtain_720x.webp" "" "50%" >}}

(1) These three paragraphs are associated with the image.

(2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(3) ALorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

{{< clearfix >}}

This paragraph is not associated with the above image.

2. Page-Top, Full-width Image

• Typically 1280 pixels width, landscape
• Note: Size forced to ‘100%" below
• {{< clearfix >}} after the image’s related text is not required but included here for completeness
• This example: 1280x575 pixels, 48.9 Kb webp

{{< img/full "images/ManBehindTheCurtain_1280x575.webp" "" "100%" >}}

(1) These two paragraphs are associated with the image.

(2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

{{< clearfix >}} - Not required by included for completeness

This paragraph is not associated with the above image.

3. Image embedded with the text

• Typically 360 pixels width, portrait
• Often used for featuredImage
• Add {{< clearfix >}} after the image’s related text
• This example: 360x437 pixels, 49.5 Kb webp

{{< img/float-end "images/ManBehindTheCurtain_360x437.webp" >}}

(1) These three paragraphs are associated with the image.

(2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(3) ALorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

{{< clearfix >}}

This paragraph is not associated with the above image.

4. Thumbnail

• Typically 75 pixels width, portrait
• Used for card headers (sans text) and links
• Add {{< clearfix >}} after the image’s related text
• This example: 75x91 pixels, 8.5 Kb webp

Left

{{< img/left "images/ManBehindTheCurtain_75x91.webp" >}}

(1) This one paragraph is associated with this image.

{{< clearfix >}}

This paragraph is not associated with the above image.

Right

{{< img/float-end "images/ManBehindTheCurtain_75x91.webp" >}}

(1) This one paragraph is associated with this image.

{{< clearfix >}}

This paragraph is not associated with the above image.