diff --git a/assets/js/academic.js b/assets/js/academic.js
index 48f78c06..7fbbc1b0 100644
--- a/assets/js/academic.js
+++ b/assets/js/academic.js
@@ -35,7 +35,7 @@
       // Escape special chars from IDs, such as colons found in Markdown footnote links.
       target = '#' + $.escapeSelector(target.substring(1));  // Previously, `target = target.replace(/:/g, '\\:');`
 
-      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight()) + 1;  // Round up to highlight right ID!
+      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight());  // Round up to highlight right ID!
       $('body').addClass('scrolling');
       $('html, body').animate({
         scrollTop: elementOffset
diff --git a/assets/scss/academic/_root.scss b/assets/scss/academic/_root.scss
index 303716ae..362fe141 100644
--- a/assets/scss/academic/_root.scss
+++ b/assets/scss/academic/_root.scss
@@ -290,6 +290,7 @@ a[data-fancybox] {
 
 .gallery a[data-fancybox] img {
   height: 250px;
+  width: auto;
   max-width: inherit;
   display: inherit;
   margin: 0;
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index eff1c44e..e4941b07 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -1,6 +1,11 @@
 {{/* Enable image to be loaded from local page dir or media library at `static/img/`. */}}
-{{ $image_src := .Get "src" }}
-{{ if .Get "library" }}
+
+{{ $asset := (.Page.Resources.ByType "image").GetMatch (.Get "src") }}
+{{ $image_src := (.Get "src") }}
+{{ if $asset }}
+  {{ $asset2 := $asset.Fit "2000x2000" }}
+  {{ $image_src = $asset2.RelPermalink }}
+{{ else if .Get "library" }}
   {{ $image_src = printf "img/%s" $image_src | relURL }}
 {{ end }}
 
@@ -21,7 +26,12 @@
   <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
 {{ end -}}
 
-<img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" {{end}}>
+{{/* Lazy load only when we know image dimensions in order to preserve anchor linking. */}}
+{{ if $asset }}
+  <img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" width="{{ (.Get "width") | default $asset.Width }}" height="{{ (.Get "height") | default $asset.Height }}">
+{{ else }}
+  <img data-src="{{$image_src}}" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" class="lazyload"{{end}}>
+{{ end }}
 
 {{- if or $lightbox (.Get "link") }}</a>{{ end }}
 
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index dc8bc55c..3d48c6ea 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -29,7 +29,7 @@
       {{ end }}
     {{ end }}
   <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
-  <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="">
+  <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
   </a>
   {{end}}
 
@@ -45,8 +45,9 @@
       {{ $.Scratch.Set "src" (printf "img/%s" .image | relURL) }}
     {{ end }}
   {{ end }}
+  {{/* Don't lazy load image as cannot init image size from non-Hugo asset, resulting in inaccurate anchor scrolling & active link highlighting. */}}
   <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }} href="{{$.Scratch.Get "src"}}">
-    <img data-src="{{$.Scratch.Get "src"}}" class="lazyload" alt="">
+    <img data-src="{{$.Scratch.Get "src"}}" alt="">
   </a>
   {{end}}
   {{else}}