Changeset 63304

Timestamp:

08/16/2026 01:19:41 AM (4 hours ago)

Author:

wildworks

Message:

Help/About: Optimize the About page images.

The header backgrounds now ship with WordPress as SVG files instead of being fetched from the CDN, the feature images have been recompressed, and those below the fold are lazy loaded.

Follow-up to [63182].
Props iamchitti, joedolson, markoserb, mukesh27, peterwilsoncc, wildworks.
Fixes #65854.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (4 diffs)
• css/about.css (modified) (2 diffs)
• images/about-header-credits-rtl.svg (added)
• images/about-header-credits.svg (added)
• images/about-header-default-rtl.svg (added)
• images/about-header-default.svg (added)
• images/about-header-freedoms-rtl.svg (added)
• images/about-header-freedoms.svg (added)
• images/about-header-get-involved-rtl.svg (added)
• images/about-header-get-involved.svg (added)
• images/about-header-privacy-rtl.svg (added)
• images/about-header-privacy.svg (added)
• images/about-release-badge.svg (modified) (1 diff)
• includes/update-core.php (modified) (1 diff)

trunk/src/wp-admin/about.php

@@ -76 +76 @@
                         <div class="column is-vertically-aligned-center is-right-padding-zero">
                                 <div class="about__image">
-                                        <img src="https://s.w.org/images/core/7.1/about-feature-01.webp?ver=20260810" alt="" height="900" width="900" />
+                                        <img src="https://s.w.org/images/core/7.1/about-feature-01.webp?ver=20260814" alt="" height="900" width="900" />
                                 </div>
                         </div>
@@ -84 +84 @@
                         <div class="column is-vertically-aligned-center is-left-padding-zero">
                                 <div class="about__image">
-                                        <img src="https://s.w.org/images/core/7.1/about-feature-02.webp?ver=20260810" alt="" height="436" width="436" />
+                                        <img loading="lazy" src="https://s.w.org/images/core/7.1/about-feature-02.webp?ver=20260814" alt="" height="900" width="900" />
                                 </div>
                         </div>
@@ -106 +106 @@
                         <div class="column is-vertically-aligned-center is-right-padding-zero">
                                 <div class="about__image">
-                                        <img src="https://s.w.org/images/core/7.1/about-feature-03.webp?ver=20260810" alt="" height="436" width="436" />
+                                        <img loading="lazy" src="https://s.w.org/images/core/7.1/about-feature-03.webp?ver=20260814" alt="" height="900" width="900" />
                                 </div>
                         </div>
@@ -114 +114 @@
                         <div class="column is-vertically-aligned-center is-left-padding-zero">
                                 <div class="about__image">
-                                        <img src="https://s.w.org/images/core/7.1/about-feature-04.webp?ver=20260810" alt="" height="436" width="436" />
+                                        <img loading="lazy" src="https://s.w.org/images/core/7.1/about-feature-04.webp?ver=20260814" alt="" height="900" width="900" />
                                 </div>
                         </div>

trunk/src/wp-admin/css/about.css

@@ -604 +604 @@
         min-height: clamp(10rem, 25vw, 18.75rem);
         border-radius: var(--border-radius);
-        background-image: url(https://s.w.org/images/core/7.1/about-header-default.webp?ver=20260804);
+        background-image: url(../images/about-header-default.svg?ver=7.1);
         background-repeat: no-repeat;
         background-position: right center;
@@ -614 +614 @@
 
 .credits-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-credits.webp?ver=20260804);
+        background-image: url(../images/about-header-credits.svg?ver=7.1);
 }
 
 .freedoms-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-freedoms.webp?ver=20260804);
+        background-image: url(../images/about-header-freedoms.svg?ver=7.1);
 }
 
 .privacy-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-privacy.webp?ver=20260804);
+        background-image: url(../images/about-header-privacy.svg?ver=7.1);
 }
 
 .contribute-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-get-involved.webp?ver=20260804);
+        background-image: url(../images/about-header-get-involved.svg?ver=7.1);
 }
 
 [dir="rtl"] .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-default-rtl.webp?ver=20260804);
+        background-image: url(../images/about-header-default-rtl.svg?ver=7.1);
 }
 
 [dir="rtl"] .credits-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-credits-rtl.webp?ver=20260804);
+        background-image: url(../images/about-header-credits-rtl.svg?ver=7.1);
 }
 
 [dir="rtl"] .freedoms-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-freedoms-rtl.webp?ver=20260804);
+        background-image: url(../images/about-header-freedoms-rtl.svg?ver=7.1);
 }
 
 [dir="rtl"] .privacy-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-privacy-rtl.webp?ver=20260804);
+        background-image: url(../images/about-header-privacy-rtl.svg?ver=7.1);
 }
 
 [dir="rtl"] .contribute-php .about__header {
-        background-image: url(https://s.w.org/images/core/7.1/about-header-get-involved-rtl.webp?ver=20260804);
+        background-image: url(../images/about-header-get-involved-rtl.svg?ver=7.1);
 }
 

trunk/src/wp-admin/images/about-release-badge.svg

@@ -1 @@
-<svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_13104_44609)">
-<rect width="280" height="280" fill="#F4F4F4"/>
-<path d="M74 140.116C74 156.169 87.0622 169.231 103.115 169.231C119.168 169.231 132.231 156.169 132.231 140.116C132.231 124.062 119.177 111 103.115 111C87.054 111 74 124.062 74 140.116ZM91.6889 163.671C82.9477 159.424 76.933 150.476 76.933 140.107C76.933 136.315 77.7509 132.713 79.1968 129.449L91.6807 163.671H91.6889ZM103.124 166.29C100.554 166.29 98.0755 165.91 95.7291 165.224L103.586 142.404L111.633 164.447C111.683 164.579 111.749 164.695 111.823 164.811C109.097 165.761 106.172 166.29 103.132 166.29H103.124ZM124.283 139.62C125.77 135.885 126.274 132.903 126.274 130.242C126.274 129.284 126.208 128.383 126.1 127.549C128.141 131.275 129.306 135.555 129.306 140.107C129.306 149.766 124.076 158.193 116.293 162.737L124.291 139.62H124.283ZM120.796 120.815C120.68 120.807 120.573 120.791 120.466 120.791C117.888 120.791 116.07 123.03 116.07 125.434C116.07 127.59 117.309 129.416 118.648 131.572C119.639 133.316 120.804 135.555 120.804 138.794C120.804 141.041 120.143 143.858 118.813 147.262L116.202 155.987L106.742 127.846C108.32 127.764 109.733 127.598 109.733 127.598C111.138 127.433 110.972 125.359 109.568 125.442C109.568 125.442 105.33 125.773 102.587 125.773C100.009 125.773 95.6878 125.442 95.6878 125.442C94.275 125.359 94.1097 127.516 95.5225 127.598C95.5225 127.598 96.861 127.764 98.2738 127.846L102.355 139.025L96.6214 156.21L87.087 127.838C88.6733 127.755 90.0778 127.59 90.0778 127.59C91.4824 127.425 91.3172 125.351 89.9126 125.434C89.9126 125.434 85.6742 125.764 82.9312 125.764C82.4438 125.764 81.8571 125.756 81.2457 125.731C85.9386 118.634 93.9775 113.941 103.124 113.941C109.94 113.941 116.145 116.552 120.796 120.824V120.815Z" fill="url(#paint0_linear_13104_44609)"/>
-<path d="M194.405 164.857V132.206C193.606 132.828 192.717 133.294 191.74 133.605C190.807 133.916 189.541 134.138 187.942 134.272C186.387 134.36 184.21 134.405 181.411 134.405V124.343C183.366 124.343 185.054 124.298 186.476 124.209C187.942 124.076 189.186 123.743 190.207 123.21C191.273 122.632 192.184 121.699 192.939 120.411C193.695 119.123 194.361 117.324 194.938 115.014H206V164.857H194.405Z" fill="#1E1E1E"/>
-<path d="M177.791 165.212C175.883 165.212 174.299 164.603 173.041 163.383C171.783 162.119 171.154 160.515 171.154 158.573C171.154 156.676 171.783 155.118 173.041 153.899C174.299 152.634 175.883 152.002 177.791 152.002C179.7 152.002 181.262 152.634 182.477 153.899C183.735 155.118 184.364 156.676 184.364 158.573C184.364 160.515 183.735 162.119 182.477 163.383C181.262 164.603 179.7 165.212 177.791 165.212Z" fill="#1E1E1E"/>
-<path d="M146.699 164.991L162.492 125.476C162.581 125.209 162.492 125.076 162.226 125.076H140.103V115.014H164.291C167.579 115.014 169.978 115.702 171.488 117.079C173.043 118.412 173.82 120.322 173.82 122.81C173.82 124.054 173.687 125.187 173.42 126.209C173.154 127.23 172.821 128.274 172.421 129.34L158.894 164.991H146.699Z" fill="#1E1E1E"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_13104_44609" x1="132.23" y1="111.809" x2="73.9993" y2="170.039" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00C253"/>
-<stop offset="0.6" stop-color="#3858E9"/>
-</linearGradient>
-<clipPath id="clip0_13104_44609">
-<rect width="280" height="280" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280" fill="none"><linearGradient id="c" x1="132.23" x2="73.999" y1="111.81" y2="170.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00c253"/><stop offset=".6" stop-color="#3858e9"/></linearGradient><clipPath id="a"><path d="M0 0h280v280H0z"/></clipPath><g clip-path="url(#a)"><path fill="#f4f4f4" d="M0 0h280v280H0z"/><path fill="url(#c)" d="M74 140.117c0 16.053 13.062 29.115 29.115 29.115s29.116-13.062 29.116-29.115c0-16.054-13.054-29.116-29.116-29.116S74 124.063 74 140.117m17.689 23.555c-8.741-4.247-14.756-13.195-14.756-23.564 0-3.792.818-7.394 2.264-10.658l12.484 34.222zm11.435 2.619c-2.57 0-5.048-.38-7.395-1.066l7.857-22.82 8.047 22.043c.05.132.116.248.19.364a26.4 26.4 0 0 1-8.691 1.479zm21.159-26.67c1.487-3.735 1.991-6.717 1.991-9.378 0-.958-.066-1.859-.174-2.693a26.07 26.07 0 0 1 3.206 12.558c0 9.659-5.23 18.086-13.013 22.63l7.998-23.117zm-3.487-18.805c-.116-.008-.223-.024-.33-.024-2.578 0-4.396 2.239-4.396 4.643 0 2.156 1.239 3.982 2.578 6.138.991 1.744 2.156 3.983 2.156 7.222 0 2.247-.661 5.064-1.991 8.468l-2.611 8.725-9.46-28.141c1.578-.082 2.991-.248 2.991-.248 1.405-.165 1.239-2.239-.165-2.156 0 0-4.238.331-6.981.331-2.578 0-6.9-.331-6.9-.331-1.412-.083-1.577 2.074-.164 2.156 0 0 1.338.166 2.75.248l4.082 11.179-5.734 17.185-9.534-28.372c1.586-.083 2.99-.248 2.99-.248 1.405-.165 1.24-2.239-.164-2.156 0 0-4.239.33-6.982.33-.487 0-1.074-.008-1.685-.033 4.693-7.097 12.732-11.79 21.878-11.79a26.04 26.04 0 0 1 17.672 6.882z"/><g fill="#1e1e1e"><path d="M194.405 164.858v-32.652a8.5 8.5 0 0 1-2.665 1.4q-1.4.466-3.799.666-2.331.133-6.53.133v-10.062q2.933 0 5.064-.133 2.199-.2 3.732-1 1.6-.866 2.732-2.798 1.133-1.933 1.999-5.398H206v49.844zM177.792 165.213q-2.863 0-4.751-1.829-1.887-1.897-1.887-4.81 0-2.845 1.887-4.674 1.888-1.897 4.751-1.897c2.863 0 3.471.632 4.685 1.897q1.888 1.828 1.888 4.674 0 2.913-1.888 4.81-1.821 1.829-4.685 1.829M146.699 164.991l15.793-39.515q.133-.4-.266-.4h-22.123v-10.062h24.188q4.932 0 7.197 2.066 2.332 2 2.332 5.731 0 1.865-.4 3.398a32 32 0 0 1-.999 3.132l-13.527 35.65z"/></g></g></svg>

trunk/src/wp-admin/includes/update-core.php

@@ -768 +768 @@
         'wp-includes/blocks/query/style-rtl.css',
         'wp-includes/blocks/query/style.css',
-        'wp-admin/images/about-header-privacy.svg',
         'wp-admin/images/about-header-about.svg',
-        'wp-admin/images/about-header-credits.svg',
-        'wp-admin/images/about-header-freedoms.svg',
         'wp-admin/images/about-header-contribute.svg',
         'wp-admin/images/about-header-background.svg',
+        /*
+         * Restored in WordPress 7.1
+         *
+         * 'wp-admin/images/about-header-privacy.svg',
+         * 'wp-admin/images/about-header-credits.svg',
+         * 'wp-admin/images/about-header-freedoms.svg',
+         */
+
         // 6.6
         'wp-includes/blocks/block/editor.css',