#7505980 Sites Management Page: optimize thumbnails size

Sent to vendor

Created on August 31, 2022 , translate by Sunday, September 4, 2022 (622 days ago)

Translate 1 original (2 words) to Thai Glossary

Prio	Original string	Translation	—
	Site thumbnail	You have to log in to add a translation.	Details
Site thumbnail Site thumbnail You have to log in to edit this translation. or Cancel Translation Memory Loading… Meta Status: untranslated Priority: normal More links: Permalink to this original All translations of this original Show all translations across locales Show original across locales Show all deliverables with this original (th) Show all deliverables with this original (overview) View deliverable: Sites Management Page: optimize thumbnails size

Legend:

Current

Waiting

Fuzzy

Old

With warnings

Export strings as

Description

Proposed Changes

Change the aspect ratio requested to mShots
Request different sizes for row and tile images
Use srcset and sizes to optimize images rendering
Make SiteThumbnail alt prop required

Screenshot

ROW

Before	After

Row Img HTML:

<img class="site-thumbnail__image"
alt="Damp Cowfish"
sizes="108px"
src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=108&amp;h=78&amp;countToRefresh=0"
srcset="https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=108&amp;h=78&amp;countToRefresh=0 108w,
        https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=216&amp;h=156&amp;countToRefresh=0 216w,
        https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=324&amp;h=234&amp;countToRefresh=0 324w"
loading="lazy">

TILE

Before	After

Tile Img HTML:

<img class="site-thumbnail__image"
alt="Damp Cowfish"
sizes="(min-width: 1400px) 401px,
        (min-width: 960px) calc(33vw - 48px),
        (min-width: 660px) calc(50vw - 48px),
        calc(100vw - 32px)"
src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=401&amp;h=275.6875&amp;countToRefresh=0"
srcset="https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=401&amp;h=275.6875&amp;countToRefresh=0 401w,
        https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=802&amp;h=551.375&amp;countToRefresh=0 802w,
        https://s0.wp.com/mshots/v1/https%3A%2F%2Fdamp-cowfish.jurassic.ninja%3Fv%3D1661342400%26iframe%3Dtrue%26preview%3Dtrue%26hide_banners%3Dtrue?vpw=1200&amp;vph=1200&amp;w=1203&amp;h=827.0625&amp;countToRefresh=0 1203w"
loading="lazy">

Testing Instructions

Go to /sites
Inspect the SiteThumbnail image
Observe no extra pixels are requested

Pre-merge Checklist

Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Closes #66723

Unfortunately, no screenshots were provided by the developer.

Show less Show more | Github Pull request