Technical fixes from code review

Co-authored-by: steveoh <[email protected]>

src/content/blog/2025-01-30-better-resolution-discover-exports.mdx

@@ -24,19 +24,19 @@ Have you ever added one of our WMTS [Discover imagery layers](/products/discover
 
 ## The problem
 
-When you create a layout in ArcGIS Pro and add a map frame, the frame has a certain scale based on the extent you set for the map. This scale defines the sizes for all map elements rendered, both vector and raster layers as well as labels. As the scale changes, so do vector symbol sizes and the level-of-detail requested from raster tile services like our WMTS-based Discover imagery and basemap services or the Esri imagery basemap.
+When you create a layout in ArcGIS Pro and add a map frame, the frame has a certain scale based on the extent you set for the map. This scale defines the sizes for all map elements rendered, both vector and raster layers as well as labels. As the scale changes, so do vector symbol sizes and the level-of-detail requested from raster tile services like our WMTS-based Discover imagery and base map services or the Esri imagery base map.
 
 For those who produce large printed maps, you're probably familiar with the "Reference scale" setting in a map's properties. This lets you lock in a scale while you work on your symbology in the map view when you're constantly zooming in and out and panning around.
 
 Unfortunately, this reference scale does not impact raster tile layers—the renderer will alway request tiles at a certain [level of detail](https://www.esri.com/arcgis-blog/products/product/mapping/web-map-zoom-levels-updated/) based on the scale specified in the layout. For example, a map scale of 1:520,000 may request level 11 (1:288,895.277144) tiles and then resample the images to 1:520,000, leading to blurry imagery. Here is a 1:1 crop of a 34"x44" 1:520,000-scale map covering the entire state of Utah exported at 300dpi.
 
-<Image src={NormalExport} loading="eager" alt="" />
+<Image src={NormalExport} loading="lazy" alt="" />
 
 See how blurry the imagery is? The farm fields look like jpeg artifact noise and the urban areas are just a jumble of grey pixels.
 
 Now compare that to a screenshot of the map view in ArcGIS Pro zoomed in to roughly the same extent. The fields are much more crisp, and you can make out individual larger buildings.
 
-<Image src={ProScreenshot} loading="eager" alt="" />
+<Image src={ProScreenshot} loading="lazy" alt="" />
 
 I've heard this is a conscious design decision to prevent massive tile requests resulting from a large jump in scales. Each scale level will have four times the number of tiles of the scale above it. For example, let's consider a layout with a map scale of 1:520,000 that has a reference scale of 1:120,000. The 1:520,000 layout map scale would grab tiles at zoom level 11, while the reference scale of 1:120,000 would grab at tiles at zoom level 13. Even with just a two zoom level difference, this is 16 times more tiles, 16 times more network traffic, 16 times more WMTS server load, and 16 times more data processed during the export.
 
@@ -46,15 +46,15 @@ The best way we've found to trick the renderer to request tiles at a higher leve
 
 While that sounds huge, because we also scaled the output jpeg's dpi, the two resulting jpegs have the same dimensions in pixels. The drastic difference in their file sizes hints at the much greater detail in the x3/100dpi version.
 
-<Image src={SizeComparison} loading="eager" alt="" />
+<Image src={SizeComparison} loading="lazy" alt="" />
 
 This is confirmed when you compare the two images side by side. The scaled-up version has much clearer imagery consistent with what we'd expect from panning around in the map view.
 
-<Image src={VisualComparison} loading="eager" alt="" />
+<Image src={VisualComparison} loading="lazy" alt="" />
 
 However, if you also have vector symbols on your map, you'll need to remember to set a reference scale consistent with the original scale. So, for our 34"x44" map our final settings look like this:
 
-<div class="width: 30%;">
+<div class="md:w-1/3 ms-auto me-auto">
 
 | Setting                  | Value       |
 | ------------------------ | ----------- |
@@ -68,7 +68,7 @@ However, if you also have vector symbols on your map, you'll need to remember to
 
 </div>
 
-<Image src={OutputSettings} loading="eager" alt="" />
+<Image src={OutputSettings} loading="lazy" alt="" />
 
 ## But what about PDFs?
 
@@ -78,7 +78,7 @@ If you have Adobe Acrobat installed (the full version, not just Acrobat Reader),
 
 Once you're in the print dialog, select "Adobe PDF" as the printer then select "Properties." Go to the "Adobe PDF Settings" tab and select your desired output size in the "Adobe PDF Page Size" dropdown. If you need a custom size not listed, you can click "Add..." to add your new page size to the dropdown list. Now you can hit "Print" and it will ask you where to save a new PDF at your desired size.
 
-<Image src={PrintToPDFSettings} loading="eager" alt="" />
+<Image src={PrintToPDFSettings} loading="lazy" alt="" />
 
 Now you can export and print maps with as much detail as you'd like in your imagery.