Reduce banner download losslessly and show title during loading

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 assets/ciil-banner.png filter=lfs diff=lfs merge=lfs -text
 assets/ciil-banner-palace.png filter=lfs diff=lfs merge=lfs -text
+assets/ciil-banner-wide-lossless.webp filter=lfs diff=lfs merge=lfs -text

README.md

@@ -8,9 +8,10 @@ app_file: index.html
 pinned: false
 ---
 
-<p align="center">
-  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner.png" alt="Central Institute of Indian Languages" width="100%" style="display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: center 46%; border-radius: 6px;" />
-</p>
+<div style="position: relative; aspect-ratio: 4 / 1; margin: 0 0 28px; overflow: hidden; border-radius: 6px; background: linear-gradient(120deg, #3e2818, #20170f 55%, #674020);">
+  <span aria-hidden="true" style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(1rem, 2.5vw, 2.8rem); line-height: 1.1; padding: 8px;">Central Institute of<br />Indian Languages</span>
+  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner-wide-lossless.webp" alt="Central Institute of Indian Languages" width="3456" height="865" loading="eager" fetchpriority="high" decoding="async" style="position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center 44%; border-radius: 6px; color: transparent;" />
+</div>
 
 <h3 align="center">भारतीय भाषा संस्थान</h3>
 

index.html

@@ -5,13 +5,15 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Central Institute of Indian Languages — India’s languages. Shared knowledge. An inclusive AI future.">
 <title>CIIL · Central Institute of Indian Languages</title>
+<link rel="preload" as="image" href="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner-wide-lossless.webp" fetchpriority="high">
 <style>
 :root { color-scheme: light dark; --bg: #fff; --text: #28303c; --heading: #18202c; --link: #805328; --rule: #e5e7eb; --quote: #b77a35; }
 * { box-sizing: border-box; }
 body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Devanagari", sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
 main { max-width: none; margin: 0 auto; padding: 40px 28px 48px; overflow-wrap: break-word; }
-main > p.ciil-banner { margin: 0 -28px 28px; }
-main > p.ciil-banner img { aspect-ratio: 4 / 1; object-fit: cover; object-position: center 46%; }
+main > .ciil-banner { position: relative; aspect-ratio: 4 / 1; margin: 0 -28px 28px; overflow: hidden; border-radius: 6px; background: linear-gradient(120deg, #3e2818, #20170f 55%, #674020); }
+.ciil-banner-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1rem, 2.5vw, 2.8rem); line-height: 1.1; padding: 8px; }
+main > .ciil-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; color: transparent; }
 img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 6px; }
 h2, h3 { color: var(--heading); font-weight: 650; line-height: 1.35; }
 h2 { margin: 2.25em 0 1em; font-size: 1.55rem; letter-spacing: -0.025em; }
@@ -29,15 +31,16 @@ ul { padding-left: 1.35em; }
 li { padding-left: 0.25em; margin: 1em 0; }
 li::marker { color: var(--quote); }
 hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0 24px; }
-@media (max-width: 600px) { main { padding: 16px 20px 32px; } main > p.ciil-banner { margin-left: -20px; margin-right: -20px; } h2 { font-size: 1.35rem; } h3[align="center"] { font-size: 1.4rem; } blockquote { padding-left: 14px; } }
+@media (max-width: 600px) { main { padding: 16px 20px 32px; } main > .ciil-banner { margin-left: -20px; margin-right: -20px; } .ciil-banner-label { font-size: 1.2rem; } h2 { font-size: 1.35rem; } h3[align="center"] { font-size: 1.4rem; } blockquote { padding-left: 14px; } }
 @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --text: #cbd5e1; --heading: #f1f5f9; --link: #dfb476; --rule: #334155; --quote: #c89653; } }
 </style>
 </head>
 <body>
 <main aria-label="Central Institute of Indian Languages organization card">
-<p class="ciil-banner" align="center">
-  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner.png" alt="Central Institute of Indian Languages" width="100%" />
-</p>
+<div class="ciil-banner">
+  <span class="ciil-banner-label" aria-hidden="true">Central Institute of<br />Indian Languages</span>
+  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner-wide-lossless.webp" alt="Central Institute of Indian Languages" width="3456" height="865" loading="eager" fetchpriority="high" decoding="async" />
+</div>
 <h3 align="center">भारतीय भाषा संस्थान</h3>
 <p align="center">
   <strong>Department of Higher Education · Ministry of Education · Government of India</strong><br />