Merge pull request #50 from S8A/feature/image_optimization

Image optimization

.github/workflows/github-pages.yml

@@ -22,6 +22,10 @@ jobs:
       #   with:
       #     node-version: '18'
       # - run: npm install
+      - name: Install ImageMagick
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y imagemagick
       - name: Build site
         uses: limjh16/jekyll-action-ts@v2
         with:

Dockerfile

@@ -0,0 +1,9 @@
+FROM jekyll/jekyll:latest
+
+# Install ImageMagick
+RUN apk add --no-cache imagemagick
+
+# Set working directory
+WORKDIR /srv/jekyll
+
+# The default command from the parent image will be used (jekyll serve)

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll", :group => :jekyll_plugins
+gem "jekyll", :group => [:jekyll_plugins, :jekyll_thumbnail_img]
 gem "webrick"
 
 group :jekyll_plugins do
@@ -22,3 +22,8 @@ group :jekyll_plugins do
   gem "jemoji"
   gem "kramdown"
 end
+
+group :jekyll_thumbnail_img do
+  gem "jekyll-thumbnail-img"
+  gem "mini_magick"
+end

Gemfile.lock

@@ -93,6 +93,9 @@ GEM
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
+    jekyll-thumbnail-img (0.1.2)
+      jekyll
+      mini_magick
     jekyll-titles-from-headings (0.5.3)
       jekyll (>= 3.3, < 5.0)
     jekyll-watch (2.2.1)
@@ -112,6 +115,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     logger (1.6.2)
     mercenary (0.4.0)
+    mini_magick (5.0.1)
     minitest (5.25.4)
     net-http (0.6.0)
       uri
@@ -167,9 +171,11 @@ DEPENDENCIES
   jekyll-sass-converter
   jekyll-seo-tag
   jekyll-sitemap
+  jekyll-thumbnail-img
   jekyll-titles-from-headings
   jemoji
   kramdown
+  mini_magick
   webrick
 
 BUNDLED WITH

_config.yml

@@ -42,6 +42,7 @@ markdown: kramdown
 plugins:
   - jekyll-feed
   - jekyll-paginate
+  - jekyll-thumbnail-img
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list

_layouts/post.html

@@ -7,7 +7,30 @@
     <h1 class="text-center">{{- page.title -}}</h1>
     <p class="text-center text-muted"><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time> &ndash; {{ page.category }}</p>
     {%- if page.big_image -%}
-      <img src="{{ site.url }}/assets/img/{{ page.big_image }}" class="img-fluid mb-4" alt="{{ page.big_image_alt }}">
+      {% assign big_image_path = page.big_image | prepend: "/assets/img/" %}
+      <img
+        srcset="
+          {% thumbnail_img big_image_path 1080 %} 1080w,
+          {% thumbnail_img big_image_path 576 %} 576w,
+          {% thumbnail_img big_image_path 520 %} 520w,
+          {% thumbnail_img big_image_path 420 %} 420w,
+          {% thumbnail_img big_image_path 380 %} 380w,
+          {% thumbnail_img big_image_path 300 %} 300w,
+          {% thumbnail_img big_image_path 200 %} 200w
+        "
+        sizes="
+          (max-width: 200px) 200px,
+          (max-width: 300px) 300px,
+          (max-width: 380px) 380px,
+          (max-width: 420px) 420px,
+          (max-width: 520px) 520px,
+          (max-width: 576px) 576px,
+          1080px
+        "
+        src="{{ big_image_path }}"
+        class="img-fluid mb-4"
+        alt="{{ page.big_image_alt }}"
+      >
     {%- endif -%}
     {{- content -}}
   </article>

_posts/2024-01-31-links-and-thoughts-001.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #1 (January 2024)"
 og_desc: Socio-biology, philosophy of human flourishing, Austrian capital theory, anarcho-capitalism, and sex differences in intelligence.
-og_image: links-and-thoughts-001-og-image.jpg
-big_image: links-and-thoughts-001-og-image.jpg
+og_image: links-and-thoughts-001.webp
+big_image: links-and-thoughts-001.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2).
 category: personal
 ---

_posts/2024-02-29-links-and-thoughts-002.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #2 (February 2024)"
 og_desc: Programming and music, mathematics and computation, and mind viruses.
-og_image: links-and-thoughts-002-og-image.jpg
-big_image: links-and-thoughts-002-og-image.jpg
+og_image: links-and-thoughts-002.webp
+big_image: links-and-thoughts-002.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2).
 category: personal
 ---

_posts/2024-03-31-links-and-thoughts-003.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #3 (March 2024)"
 og_desc: Contrasting views on immigration, and national IQ's relationship with prosperity.
-og_image: links-and-thoughts-003-og-image.jpg
-big_image: links-and-thoughts-003-og-image.jpg
+og_image: links-and-thoughts-003.webp
+big_image: links-and-thoughts-003.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2).
 category: personal
 ---

_posts/2024-04-30-links-and-thoughts-004.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #4 (April 2024)"
 og_desc: Household management philosophy, sexual restraint and civilizational achievement, smart fraction theory, human biodiversity, and human beauty.
-og_image: links-and-thoughts-004-og-image.jpg
-big_image: links-and-thoughts-004-og-image.jpg
+og_image: links-and-thoughts-004.webp
+big_image: links-and-thoughts-004.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-05-31-links-and-thoughts-005.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #5 (May 2024)"
 og_desc: The OODA Loop, elite group formation, nature vs. nurture, and why male hunter-gatherers hunt more than females.
-og_image: links-and-thoughts-005-og-image.jpg
-big_image: links-and-thoughts-005-og-image.jpg
+og_image: links-and-thoughts-005.webp
+big_image: links-and-thoughts-005.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-06-30-links-and-thoughts-006.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #6 (June 2024)"
 og_desc: Great work, Churchill, bioelectricity, Critical Age Theory, and normative versus positive hypocrisy.
-og_image: links-and-thoughts-006-og-image.jpg
-big_image: links-and-thoughts-006-og-image.jpg
+og_image: links-and-thoughts-006.webp
+big_image: links-and-thoughts-006.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-07-31-links-and-thoughts-007.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #7 (July 2024)"
 og_desc: The rise of the West, Jewish IQ, notable Europeans, Mises's Human Action, progressivism as a memetic virus, cultural evolution, locals fleeing immigration, and the three worst US presidents.
-og_image: links-and-thoughts-007-og-image.jpg
-big_image: links-and-thoughts-007-og-image.jpg
+og_image: links-and-thoughts-007.webp
+big_image: links-and-thoughts-007.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-08-31-links-and-thoughts-008.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #8 (August 2024)"
 og_desc: The mutational load hypothesis, O-ring theory, the origins of AIDS, murder rate comparisons, and the rise of LGBT identity.
-og_image: links-and-thoughts-008-og-image.jpg
-big_image: links-and-thoughts-008-og-image.jpg
+og_image: links-and-thoughts-008.webp
+big_image: links-and-thoughts-008.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-09-30-links-and-thoughts-009.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #9 (September 2024)"
 og_desc: The cost of apathy, the ideological well-being gap, trans-racial dysmorphia, and the strange loops of life and lifting.
-og_image: links-and-thoughts-009-og-image.jpg
-big_image: links-and-thoughts-009-og-image.jpg
+og_image: links-and-thoughts-009.webp
+big_image: links-and-thoughts-009.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-10-31-links-and-thoughts-010.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #10 (October 2024)"
 og_desc: West Eurasian evolution, human genetic deterioration, Christianity and cognitive evolution, immigration and federalism, and Mises on fractional reserve banking.
-og_image: links-and-thoughts-010-og-image.jpg
-big_image: links-and-thoughts-010-og-image.jpg
+og_image: links-and-thoughts-010.webp
+big_image: links-and-thoughts-010.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

_posts/2024-11-30-links-and-thoughts-011.md

@@ -2,8 +2,8 @@
 layout: post
 title: "Links and Thoughts #11 (November 2024)"
 og_desc: Origins of modernity, intelligence skewness, American homicide statistics, sigma females, epigenetics, nuclear families, early human history, and why it's not enough to hate the state.
-og_image: links-and-thoughts-011-og-image.jpg
-big_image: links-and-thoughts-011-og-image.jpg
+og_image: links-and-thoughts-011.webp
+big_image: links-and-thoughts-011.webp
 big_image_alt: AI-generated illustrations for the featured articles (Playground v2.5).
 category: personal
 ---

about.html

@@ -14,7 +14,31 @@
   <div class="col-12 col-lg-8 mx-auto">
     <div class="row flex-md-row-reverse g-4 mb-4">
       <div class="col-12 col-md-3">
-        <img src="/assets/img/s8a-20231207-defaultdpi.jpg" srcset="/assets/img/s8a-20231207-hidpi.jpg 2x, /assets/img/s8a-20231207-higherdpi.jpg 4x" alt="Picture of Samuel Ochoa on December 7, 2023." class="img-fluid" loading="lazy">
+        <div class="ratio ratio-1x1">
+          <img
+            srcset="
+              /assets/img/s8a-20231207.webp 1728w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 576 %} 576w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 520 %} 520w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 420 %} 420w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 380 %} 380w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 300 %} 300w,
+              {% thumbnail_img '/assets/img/s8a-20231207.webp' 200 %} 200w
+            "
+            sizes="
+              (max-width: 200px) 200px,
+              (max-width: 300px) 300px,
+              (max-width: 380px) 380px,
+              (max-width: 420px) 420px,
+              (max-width: 520px) 520px,
+              (max-width: 576px) 576px,
+              200px
+            "
+            src="{% thumbnail_img '/assets/img/s8a-20231207.webp' 576 %}"
+            alt=""
+            class="img-fluid"
+          >
+        </div>
       </div>
       <div class="col-12 col-md-9">
         <h1 class="display-5 fw-bold">Samuel Ochoa</h1>

blog/index.html

@@ -10,7 +10,30 @@ <h1 class="text-center">Blog</h1>
   {%- for post in paginator.posts -%}
   <div class="col">
     <div class="card shadow-sm h-100">
-      <img src="{{ site.url }}/assets/img/{{ post.og_image | default: 's8a-thumbnail.png' }}" alt="" class="card-img-top">
+      {% assign og_image_path = post.og_image | default: 's8a-thumbnail.png' | prepend: "/assets/img/" %}
+      <img
+        srcset="
+          {% thumbnail_img og_image_path 576 %} 576w,
+          {% thumbnail_img og_image_path 480 %} 480w,
+          {% thumbnail_img og_image_path 340 %} 340w,
+          {% thumbnail_img og_image_path 256 %} 256w,
+          {% thumbnail_img og_image_path 200 %} 200w
+        "
+        sizes="
+          (max-width: 200px) 200px,
+          (max-width: 256px) 256px,
+          (max-width: 340px) 340px,
+          (max-width: 480px) 480px,
+          (max-width: 576px) 576px,
+          (max-width: 768px) 256px,
+          (max-width: 992px) 340px,
+          (max-width: 1200px) 480px,
+          480px
+        "
+        src="{% thumbnail_img og_image_path 576 %}"
+        alt=""
+        class="card-img-top"
+      >
       <div class="card-body">
         <h2 class="card-title fs-5"><a href="{{ post.url }}">{{ post.title }}</a></h2>
         <p class="card-subtitle mb-2 text-muted">{{ post.date | date_to_string }}</p>

docker-compose.yml

@@ -2,7 +2,9 @@ version: '3'
 
 services:
   site:
-    image: jekyll/jekyll:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
     command: jekyll serve
     ports:
       - "4000:4000"

index.html

@@ -7,7 +7,30 @@
 
 <div class="row justify-content-center py-xl-5">
   <div class="col-md-5 col-lg-4 mb-4 mb-lg-0 text-center">
-    <img src="/assets/img/s8a-20231207-defaultdpi.jpg" srcset="/assets/img/s8a-20231207-hidpi.jpg 2x, /assets/img/s8a-20231207-higherdpi.jpg 4x" alt="Picture of Samuel Ochoa on December 7, 2023." class="d-block mx-auto mb-3 img-fluid" loading="lazy">
+    <div class="ratio ratio-1x1 mx-auto mb-3">
+      <img
+        srcset="
+          /assets/img/s8a-20231207.webp 1728w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 576 %} 576w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 520 %} 520w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 420 %} 420w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 380 %} 380w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 300 %} 300w,
+          {% thumbnail_img '/assets/img/s8a-20231207.webp' 200 %} 200w
+        "
+        sizes="
+          (max-width: 200px) 200px,
+          (max-width: 300px) 300px,
+          (max-width: 380px) 380px,
+          (max-width: 420px) 420px,
+          (max-width: 520px) 520px,
+          576px
+        "
+        src="{% thumbnail_img '/assets/img/s8a-20231207.webp' 576 %}"
+        alt=""
+        class="img-fluid"
+      >
+    </div>
     <div class="d-block d-md-grid d-xxl-block gap-2">
       {% for contact in site.data.contact %}
       <a href="{{ contact.url }}" class="btn btn-outline-primary mb-2 mb-md-0"><i class="{{ contact.icon }}"></i> {{ contact.name }}</a>