diff --git a/mpas_analysis/shared/html/image_xml.py b/mpas_analysis/shared/html/image_xml.py
index c43051bd0..71340c807 100644
--- a/mpas_analysis/shared/html/image_xml.py
+++ b/mpas_analysis/shared/html/image_xml.py
@@ -9,11 +9,13 @@
 # distributed with this code, or at
 # https://raw.githubusercontent.com/MPAS-Dev/MPAS-Analysis/main/LICENSE
 
+import datetime
 import os
-import sys
 import socket
 import subprocess
-import datetime
+import sys
+from pathlib import Path
+
 from lxml import etree
 from PIL import Image
 
@@ -196,12 +198,21 @@ def _generate_thumbnails(imageFileName, directory):
     fixedWidth = 480
     fixedHeight = 360
 
-    image = Image.open('{}/{}'.format(directory, imageFileName))
-    thumbnailDir = '{}/thumbnails'.format(directory)
+    # more vertical than horizontal
+    aspectRatioThreshold = 0.75
+
+    directory = Path(directory)
+
+    image = Image.open(directory / imageFileName)
+    image = image.convert('RGB')
+    thumbnailDir = directory / 'thumbnails'
+    thumbnailFilename = Path(imageFileName).with_suffix('.jpg')
+    fixedFilename = f'fixed_{str(thumbnailFilename)}'
 
     imageSize = image.size
+    aspectRatio = imageSize[0] / float(imageSize[1])
 
-    if imageSize[0] < imageSize[1]:
+    if aspectRatio < aspectRatioThreshold:
         orientation = 'vert'
         thumbnailHeight = 320
     else:
@@ -212,7 +223,8 @@ def _generate_thumbnails(imageFileName, directory):
     factor = image.size[1] / float(thumbnailHeight)
     thumbnailSize = [int(dim / factor + 0.5) for dim in image.size]
     thumbnail = image.resize(thumbnailSize, Image.LANCZOS)
-    thumbnail.save('{}/{}'.format(thumbnailDir, imageFileName))
+
+    thumbnail.save(thumbnailDir / thumbnailFilename)
 
     # second, make a thumbnail with a fixed size
     widthFactor = image.size[0] / float(fixedWidth)
@@ -233,7 +245,7 @@ def _generate_thumbnails(imageFileName, directory):
         # crop out the left side of the thubnail
         thumbnail = thumbnail.crop([0, 0, fixedWidth, fixedHeight])
 
-    thumbnail.save('{}/fixed_{}'.format(thumbnailDir, imageFileName))
+    thumbnail.save(thumbnailDir / fixedFilename)
 
     return imageSize, thumbnailSize, orientation
 
diff --git a/mpas_analysis/shared/html/pages.py b/mpas_analysis/shared/html/pages.py
index 737b6f7cd..883940dec 100644
--- a/mpas_analysis/shared/html/pages.py
+++ b/mpas_analysis/shared/html/pages.py
@@ -9,13 +9,15 @@
 # distributed with this code, or at
 # https://raw.githubusercontent.com/MPAS-Dev/MPAS-Analysis/main/LICENSE
 
-import pkg_resources
-from os import makedirs
-from lxml import etree
-from collections import OrderedDict
-import subprocess
 import os
+import subprocess
 import sys
+from collections import OrderedDict
+from os import makedirs
+from pathlib import Path
+
+import pkg_resources
+from lxml import etree
 
 import mpas_analysis.version
 from mpas_analysis.shared.io.utility import build_config_full_path, copyfile
@@ -222,7 +224,7 @@ def generate(self):
 
         for componentName, componentDict in self.components.items():
             subdirectory = componentDict['subdirectory']
-            imageFileName = componentDict['imageFileName']
+            imageFileName = _to_jpg(componentDict['imageFileName'])
             replacements = {'@componentDir': subdirectory,
                             '@componentName': componentName,
                             '@firstImage': imageFileName}
@@ -555,7 +557,9 @@ def _get_required_xml_text(root, tag, fileName):
 
     def _generate_image_text(self, imageFileName, imageDict):
         """fill in the template for a given image with the desired content"""
-        replacements = {'@imageFileName': imageFileName}
+        thumbnailFileName = _to_jpg(imageFileName)
+        replacements = {'@imageFileName': imageFileName,
+                        '@thumbnailFileName': thumbnailFileName}
         for tag in ['imageSize', 'imageDescription', 'imageCaption',
                     'thumbnailDescription', 'orientation', 'thumbnailWidth',
                     'thumbnailHeight']:
@@ -627,11 +631,11 @@ def _generate_quick_link_text(self, groupName, groupDict):
         """
 
         firstGallery = next(iter(groupDict['galleries'].values()))
-        firstImageFileName = next(iter(firstGallery['images']))
+        thumbnailFileName = _to_jpg(next(iter(firstGallery['images'])))
 
         replacements = {'@analysisGroupName': groupName,
                         '@analysisGroupLink': groupDict['link'],
-                        '@imageFileName': firstImageFileName}
+                        '@thumbnailFileName': thumbnailFileName}
 
         quickLinkText = _replace_tempate_text(self.templates['quicklink'],
                                               replacements)
@@ -666,3 +670,11 @@ def _get_git_hash():
 
     githash = githash.decode('utf-8').strip('\n').replace('"', '')
     return githash
+
+
+def _to_jpg(filename):
+    """
+    change the file extention to jpg (presumably from png)
+    """
+    filename = str(Path(filename).with_suffix('.jpg'))
+    return filename
diff --git a/mpas_analysis/shared/html/templates/component_image.html b/mpas_analysis/shared/html/templates/component_image.html
index 184bc43ec..4a951030a 100644
--- a/mpas_analysis/shared/html/templates/component_image.html
+++ b/mpas_analysis/shared/html/templates/component_image.html
@@ -1,7 +1,7 @@
 
       <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
         <a href="@imageFileName" itemprop="contentUrl" data-size="@imageSize">
-            <img class="@orientation" src="thumbnails/@imageFileName" itemprop="thumbnail" alt="@imageDescription" width="@thumbnailWidth" height="@thumbnailHeight"/>
+            <img class="@orientation" src="thumbnails/@thumbnailFileName" itemprop="thumbnail" alt="@imageDescription" width="@thumbnailWidth" height="@thumbnailHeight"/>
         </a>
         <figcaption itemprop="caption description">@imageCaption</figcaption>
         <div class="desc-small">@thumbnailDescription</div>
diff --git a/mpas_analysis/shared/html/templates/component_quicklink.html b/mpas_analysis/shared/html/templates/component_quicklink.html
index 0d1031ce1..d012d671a 100644
--- a/mpas_analysis/shared/html/templates/component_quicklink.html
+++ b/mpas_analysis/shared/html/templates/component_quicklink.html
@@ -1,7 +1,7 @@
 
     <div class="gallery-link small">
       <a href="#@analysisGroupLink">
-        <img class="small" src="thumbnails/fixed_@imageFileName" alt="@analysisGroupName">
+        <img class="small" src="thumbnails/fixed_@thumbnailFileName" alt="@analysisGroupName">
       </a>
       <div class="desc-small">@analysisGroupName</div>
     </div>
\ No newline at end of file