将养老工地学校图片转换为WebP提升加载性能

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
     "@astrojs/tailwind": "^6.0.2",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3"
   },

pnpm-lock.yaml

@@ -21,6 +21,9 @@ importers:
       '@astrojs/tailwind':
         specifier: ^6.0.2
         version: 6.0.2(astro@5.17.1(jiti@1.21.7)(rollup@4.57.1)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19)
+      sharp:
+        specifier: ^0.34.5
+        version: 0.34.5
       tailwindcss:
         specifier: ^3.4.19
         version: 3.4.19
@@ -2310,8 +2313,7 @@ snapshots:
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@img/colour@1.0.0':
-    optional: true
+  '@img/colour@1.0.0': {}
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -2923,8 +2925,7 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-libc@2.1.2:
-    optional: true
+  detect-libc@2.1.2: {}
 
   deterministic-object-hash@2.0.2:
     dependencies:
@@ -3926,7 +3927,6 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
-    optional: true
 
   shiki@3.22.0:
     dependencies:

src/components/sections/ConstructionArchitecture.astro

@@ -26,7 +26,7 @@
 				</div>
 
 				<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
-					<img src="/img/construction/architecture.png" alt="智慧工地系统架构图" class="w-full h-auto object-cover" />
+					<img src="/img/construction/architecture.webp" alt="智慧工地系统架构图" class="w-full h-auto object-cover" />
 				</div>
 			</div>
 		</div>

src/components/sections/ConstructionHero.astro

@@ -24,7 +24,7 @@
 				<div class="relative">
 					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
 					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
-						<img src="/img/construction/hero.jpg" alt="智慧工地平台展示" class="w-full h-auto object-cover">
+						<img src="/img/construction/hero.webp" alt="智慧工地平台展示" class="w-full h-auto object-cover">
 					</div>
 				</div>
 			</div>

src/components/sections/ConstructionPainPoints.astro

@@ -3,25 +3,25 @@ const painPoints = [
 	{
 		title: '安全生产风险突出',
 		desc: '工地事故类型复杂、影响范围广，传统巡检难以实现全时段覆盖，隐患识别和处置常常滞后。',
-		img: '/img/construction/pain-1.png',
+		img: '/img/construction/pain-1.webp',
 		tag: '事故预防'
 	},
 	{
 		title: '环境与秩序管理压力大',
 		desc: '扬尘、噪声、泥土遗撒与现场治安事件并存，监管要求持续趋严，现场管理压力持续上升。',
-		img: '/img/construction/pain-2.png',
+		img: '/img/construction/pain-2.webp',
 		tag: '环保与治安'
 	},
 	{
 		title: '人员与车辆管理混乱',
 		desc: '人员身份核验、考勤统计和车辆调度缺少统一机制，外来人员与运输车辆难以精细化管控。',
-		img: '/img/construction/pain-3.png',
+		img: '/img/construction/pain-3.webp',
 		tag: '实名与调度'
 	},
 	{
 		title: '协同与响应效率偏低',
 		desc: '作业面分散导致信息传递链路长，突发事件中难以及时定位、联动和复盘，影响处置效率。',
-		img: '/img/construction/pain-4.png',
+		img: '/img/construction/pain-4.webp',
 		tag: '处置协同'
 	}
 ];

src/components/sections/EducationArchitecture.astro

@@ -65,7 +65,7 @@ const capabilities = [
 				</div>
 
 				<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
-					<img src="/img/education/architecture.png" alt="智慧学校系统架构图" class="w-full h-auto object-cover" />
+					<img src="/img/education/architecture.webp" alt="智慧学校系统架构图" class="w-full h-auto object-cover" />
 				</div>
 			</div>
 

src/components/sections/EducationHero.astro

@@ -24,7 +24,7 @@
 				<div class="relative">
 					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
 					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
-						<img src="/img/education/hero.png" alt="智慧学校平台展示" class="w-full h-auto object-cover">
+						<img src="/img/education/hero.webp" alt="智慧学校平台展示" class="w-full h-auto object-cover">
 					</div>
 				</div>
 			</div>

src/components/sections/ElderlyArchitecture.astro

@@ -22,7 +22,7 @@
 				</div>
 
 				<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
-					<img src="/img/elderly/architecture.png" alt="智慧养老系统架构图" class="w-full h-auto object-cover" />
+					<img src="/img/elderly/architecture.webp" alt="智慧养老系统架构图" class="w-full h-auto object-cover" />
 				</div>
 			</div>
 		</div>

src/components/sections/ElderlyCases.astro

@@ -4,13 +4,13 @@ const cases = [
 		title: '河北承德国恩老年公寓“4·8”重大火灾事故',
 		brief: '自制劣质插排短路引燃衣物，叠加违规彩钢板、消防失效与夜间处置缺位，造成重大人员伤亡。',
 		focus: '暴露问题：电气隐患失管、消防设施失效、值班体系缺位。',
-		img: '/img/elderly/case-1.png'
+		img: '/img/elderly/case-1.webp'
 	},
 	{
 		title: '广东东莞康怡护理院“4·4”较大火灾事故',
 		brief: '违规改建及用火不慎叠加消防系统长期瘫痪，起火后无有效报警、喷淋与排烟联动。',
 		focus: '暴露问题：系统长期手动、日常巡检流于形式、应急链条断裂。',
-		img: '/img/elderly/case-2.png'
+		img: '/img/elderly/case-2.webp'
 	}
 ];
 ---

src/components/sections/ElderlyHero.astro

@@ -24,7 +24,7 @@
 				<div class="relative">
 					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
 					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
-						<img src="/img/elderly/hero.png" alt="智慧养老平台展示" class="w-full h-auto object-cover">
+						<img src="/img/elderly/hero.webp" alt="智慧养老平台展示" class="w-full h-auto object-cover">
 					</div>
 				</div>
 			</div>

src/components/sections/ElderlyHomeCare.astro

@@ -34,7 +34,7 @@ const products = [
 		<div class="bg-white rounded-3xl border border-emerald-100 p-5 md:p-8">
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-center">
 				<div class="rounded-2xl overflow-hidden border border-gray-100 shadow-sm">
-					<img src="/img/elderly/homecare.png" alt="居家养老服务场景示意" class="w-full h-auto object-cover" />
+					<img src="/img/elderly/homecare.webp" alt="居家养老服务场景示意" class="w-full h-auto object-cover" />
 				</div>
 
 				<div class="space-y-4">

src/components/sections/ElderlyPainPoints.astro

@@ -3,32 +3,32 @@ const painPoints = [
 	{
 		title: '管理模式滞后',
 		desc: '传统手段陈旧、应急响应迟缓，火情与突发事件处置不及时。',
-		img: '/img/elderly/pain-1.jpg'
+		img: '/img/elderly/pain-1.webp'
 	},
 	{
 		title: '设施维护困难',
 		desc: '设备状态缺乏在线监控，数据分散，维护效率和准确性偏低。',
-		img: '/img/elderly/pain-2.jpg'
+		img: '/img/elderly/pain-2.webp'
 	},
 	{
 		title: '电气隐患隐蔽',
 		desc: '线路老化难察觉，人工排查容易遗漏，风险预警能力不足。',
-		img: '/img/elderly/pain-3.jpg'
+		img: '/img/elderly/pain-3.webp'
 	},
 	{
 		title: '台账管理低效',
 		desc: '纸质记录易丢失、更新滞后，带来较高合规管理成本。',
-		img: '/img/elderly/pain-4.jpg'
+		img: '/img/elderly/pain-4.webp'
 	},
 	{
 		title: '演练流于形式',
 		desc: '缺少实战化模拟，员工处置能力薄弱，预案与现场脱节。',
-		img: '/img/elderly/pain-5.jpg'
+		img: '/img/elderly/pain-5.webp'
 	},
 	{
 		title: '监控存在盲区',
 		desc: '安防覆盖不全，难以实时管控，事后追溯效率较低。',
-		img: '/img/elderly/pain-6.png'
+		img: '/img/elderly/pain-6.webp'
 	}
 ];
 ---

src/components/sections/ElderlyPolicy.astro

@@ -5,28 +5,28 @@ const policies = [
 		meta: '国务院办公厅 | 国办发〔2026〕7号',
 		desc: '2026年养老安全领域顶层监管文件，聚焦火灾等重特大风险，要求全面排查整治突出隐患。',
 		tags: ['一院一策', '闭环整改', '动态清零'],
-		img: '/img/elderly/policy-1.png'
+		img: '/img/elderly/policy-1.webp'
 	},
 	{
 		title: '养老机构生活照料服务基本规范',
 		meta: 'GB/T 46914-2025 | 2026年4月实施',
 		desc: '统一生活照料、安全防护、人员配置、服务流程、应急呼叫等核心要求，作为监管与等级评定依据。',
 		tags: ['国家基础标准', '检查评级依据'],
-		img: '/img/elderly/policy-2.png'
+		img: '/img/elderly/policy-2.webp'
 	},
 	{
 		title: '养老服务标准体系建设指南（2025版）',
 		meta: '民政部、国标委',
 		desc: '构建全国统一、层级清晰的标准体系，覆盖安全管理、生活照料、医疗护理、消防安全、人员资质等领域。',
 		tags: ['统一技术标尺', '规范化运营依据'],
-		img: '/img/elderly/policy-3.png'
+		img: '/img/elderly/policy-3.webp'
 	},
 	{
 		title: '加快建立长期护理保险制度实施方案',
 		meta: '国家医保局等八部门 | 2026年3月',
 		desc: '加快全国长护险落地，配套建立机构准入、服务质量监管、费用审核与支付管控机制。',
 		tags: ['长护险落地', '资金与服务双监管'],
-		img: '/img/elderly/policy-4.png'
+		img: '/img/elderly/policy-4.webp'
 	}
 ];
 ---