Closes #20211: Use thumbnails for ImageAttachment hover previews to improve page load performance #394

New Issue

MrUnknownDE · 2026-04-05T16:29:18+02:00

MrUnknownDE commented

2026-04-05 16:29:18 +02:00

Originally created by @pheus on 2/9/2026

Fixes: #20211

Thanks for taking the time to review this PR!

This PR addresses the performance issue described in #20211, where object pages preload full-size image attachments for the hover preview. With the addition of image thumbnails in NetBox 4.4, we can use those smaller images for the popover preview instead, which reduces bandwidth usage and improves initial page load time (especially on pages with multiple large image attachments).

Summary of changes

Previews now prefer a lightweight data-preview-url (thumbnail) with a fallback to the link href, reducing bandwidth and improving page load performance for records with large image attachments.

Use 400x400 thumbnails for popover previews
Center preview images within the popover body
Move popover placement from top to left
Enable lazy loading and async decoding for preview images

Notes

Clicking the image icon navigates to the attachment detail view.
The behavior is backwards-compatible: if data-preview-url is not present, the preview falls back to href as before.

Please let me know if you’d prefer a different thumbnail size or popover placement, or if there’s a more appropriate SCSS location for the styling changes. Happy to adjust.

*Originally created by @pheus on 2/9/2026* ### Fixes: #20211 Thanks for taking the time to review this PR! This PR addresses the performance issue described in #20211, where object pages preload full-size image attachments for the hover preview. With the addition of image thumbnails in NetBox 4.4, we can use those smaller images for the popover preview instead, which reduces bandwidth usage and improves initial page load time (especially on pages with multiple large image attachments). #### Summary of changes Previews now prefer a lightweight `data-preview-url` (thumbnail) with a fallback to the link `href`, reducing bandwidth and improving page load performance for records with large image attachments. - Use 400x400 thumbnails for popover previews - Center preview images within the popover body - Move popover placement from top to left - Enable lazy loading and async decoding for preview images #### Notes - Clicking the image icon navigates to the attachment detail view. - The behavior is backwards-compatible: if `data-preview-url` is not present, the preview falls back to `href` as before. Please let me know if you’d prefer a different thumbnail size or popover placement, or if there’s a more appropriate SCSS location for the styling changes. Happy to adjust.

MrUnknownDE closed this issue

2026-04-05 16:29:18 +02:00

Sign in to join this conversation.

Branches Tags

main

21455-sql-indexes-audit

21357-register-model-actions

feature

20924-plugin-ui-components

21766-improve-test-coverage-for-sortable-table-columns

21157-export-template-public-models

21025-pre-render-config-contexts

21364-swagger

feature-ip-prefix-link

20911-dropdown-3

fix_module_substitution

21160-filterset

20911-dropdown-2

20044-elevation-stuck-lightmode

7604-filter-modifiers-v3

20660-script-load

19724-graphql

14884-script

19720-macaddress-interface-generic-relation

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/netbox#394