Maintenance: Pictures and Images

Disclaimer: Maintenance pages are for those who update this website. Nonetheless, everyone is free to look.

Four Categories of Use

1. Publication Cover, portrait orientation
   • 720 pixels wide
   • Typically 720x1080 (portrait)
   • Used as featuredImage on publications
   • Appears at top of post filling the left-half (or top) of the display
2. Page-top, full width, landscape orientation
   • 1280 pixels wide (the visitor’s browser will scale as needed)
   • Height typically cropped at 512 pixels or less
3. Embedded within an article and placed left or right with text flowing around the image
   • 360 pixels wide
   • Typically 360x480 (portrait)
   • Often used for featuredImage
4. Thumbnail images
   • 75 pixels wide
   • Typically 75x100 (portrait)
   • Often used for links

Considerations

• 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).
• ImageMagick command line tools are convenient (and free). Installed on Mac computers via brew install imagemagick and then invoked as magick, it can perform much of the work
  • 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

Example Images

Publication (featureImage)

• 720 pixels wide, 300 dpi, ? webp
• {{< img/left "images/ManBehindTheCurtain_720x.webp" "50%" >}}
  

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.

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.

(In the markdown, a {{< clearfix >}} must be present at this point in the text to force subsequent text to appear after the image instead of to its right.)

Page-Top

• 1280x575 pixels, 300 dpi, 49Kb webp
• Note the ‘100%" parameter for a full-width image
• {{< img/full "images/ManBehindTheCurtain_1280x575.webp" "100%" >}}
  

Embedded

• 360x437 pixels, 300 dpi, 49Kb webp
• {{< img/float-end "images/ManBehindTheCurtain_360x437.webp" >}}

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.

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.

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.

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.

Thumbnail

• 75x91 pixels, 300 dpi, 9Kb webp
• {{< img/left "images/ManBehindTheCurtain_75x91.webp" >}}
• Note: This is not a “floating” image. It simply appears to the left of text in the same block (div, or span).
• Rationale: When coded as a float, the text doesn’t wrap appropriately. Fortunately, as long as the image is very small, it will not need to scale so having it in a separate block is irrelevent.