-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (200 loc) · 9.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 移动端优化 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!-- 核心Meta标签优化 -->
<title>图片工具 - 免费在线图片压缩和优化工具 | Image Tools</title>
<meta name="description" content="专业的在线图片压缩工具，支持PNG、JPG格式。智能压缩算法，快速处理，无需上传，保护隐私。提供批量处理、格式转换等多种功能。">
<meta name="keywords" content="图片压缩,图片优化,在线工具,PNG压缩,JPG压缩,图片处理,免费工具">
<!-- 移动端优化 -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- 搜索引擎指令 -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://imgt.2esp.com/image-tools">
<!-- 社交媒体优化 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://imgt.2esp.com/image-tools">
<meta property="og:title" content="图片工具 - 免费在线图片压缩和优化工具">
<meta property="og:description" content="专业的在线图片压缩工具，支持PNG、JPG格式。智能压缩算法，快速处理，无需上传，保护隐私。">
<meta property="og:image" content="https://imgt.2esp.com/image-tools/preview.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="图片工具 - 免费在线图片压缩和优化工具">
<meta name="twitter:description" content="专业的在线图片压缩工具，支持PNG、JPG格式。智能压缩算法，快速处理，无需上传，保护隐私。">
<meta name="twitter:image" content="https://imgt.2esp.com/image-tools/preview.jpg">
<!-- 结构化数据优化 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "图片工具",
"description": "专业的在线图片压缩和优化工具",
"applicationCategory": "图片处理工具",
"operatingSystem": "All",
"url": "https://imgt.2esp.com/image-tools",
"author": {
"@type": "Person",
"name": "ChiefHYK",
"email": "[email protected]"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "CNY"
},
"featureList": [
"智能图片压缩",
"本地处理保护隐私",
"支持PNG、JPG格式",
"批量处理功能",
"无损压缩选项"
]
}
</script>
<!-- 性能优化 -->
<link rel="preload" href="css/style.css" as="style">
<link rel="preload" href="js/main.js" as="script">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- PWA支持 -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ffffff">
<!-- 样式表 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 无障碍跳转链接 -->
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<!-- 主要内容区域 -->
<main id="main-content" class="container" role="main">
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb" class="breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li aria-current="page">图片工具</li>
</ol>
</nav>
<!-- 页面标题 -->
<header class="header">
<h1>图片工具</h1>
<p class="subtitle">专业的在线图片处理工具</p>
</header>
<!-- 功能介绍 -->
<section class="features" aria-label="功能特点">
<h2>主要功能</h2>
<ul>
<li>智能图片压缩，保持最佳质量</li>
<li>本地处理，保护隐私安全</li>
<li>支持PNG、JPG等主流格式</li>
<li>提供批量处理功能</li>
</ul>
</section>
<!-- 上传区域 -->
<section class="upload-area" id="uploadArea" role="region" aria-label="图片上传区域">
<input type="file" id="fileInput" accept="image/png, image/jpeg" hidden aria-label="选择图片文件">
<div class="upload-hint">
<svg class="upload-icon" viewBox="0 0 24 24" role="img" aria-label="上传图标">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
<p>点击或拖放图片到这里</p>
<p class="upload-hint-sub">支持 PNG、JPG 格式</p>
</div>
</section>
<!-- 图片处理区域 -->
<section class="image-processing" id="imageProcessing" style="display: none;" role="region" aria-label="图片处理区域">
<!-- 原有内容保持不变，但添加无障碍属性 -->
<div class="preview-container">
<!-- 原图预览 -->
<article class="preview-box" role="article" aria-label="原图预览">
<h2>原图</h2>
<div class="image-preview">
<img id="originalPreview" alt="原图预览" aria-label="原始图片预览">
</div>
<div class="file-info" id="originalInfo" aria-live="polite">
<span class="file-size">大小: </span>
<span class="file-dimensions">尺寸: </span>
</div>
</article>
<!-- 压缩控制 -->
<div class="compression-controls" role="group" aria-label="压缩控制">
<div class="compression-info">
<div class="suggestion-box">
<h4>系统建议</h4>
<p id="compressionSuggestion"></p>
</div>
<div class="estimate-box">
<h4>预估大小</h4>
<p id="sizeEstimate"></p>
</div>
</div>
<div class="quality-control">
<label for="quality">压缩质量</label>
<input type="range" id="quality" min="0" max="100" value="80">
<span id="qualityValue">80%</span>
</div>
<div class="format-control">
<label>输出格式:</label>
<select id="outputFormat">
<option value="auto">自动 (保持原格式)</option>
<option value="jpeg">强制 JPEG</option>
<option value="png">强制 PNG</option>
</select>
</div>
<button id="compressBtn" class="primary-button">压缩图片</button>
</div>
<!-- 压缩后预览 -->
<article class="preview-box" role="article" aria-label="压缩后预览">
<h2>压缩后</h2>
<div class="image-preview">
<img id="compressedPreview" alt="压缩后预览" aria-label="压缩后图片预览">
</div>
<div class="file-info" id="compressedInfo" aria-live="polite">
<span class="file-size">大小: </span>
<span class="file-dimensions">尺寸: </span>
</div>
<button id="downloadBtn" class="secondary-button" disabled aria-label="下载压缩后的图片">下载图片</button>
</article>
</div>
</section>
<!-- 使用说明 -->
<section class="instructions" aria-label="使用说明">
<h2>使用说明</h2>
<ol>
<li>选择或拖放图片到上传区域</li>
<li>调整压缩参数（可选）</li>
<li>点击"压缩图片"按钮</li>
<li>下载处理后的图片</li>
</ol>
</section>
</main>
<!-- 页脚优化 -->
<footer class="footer" role="contentinfo">
<div class="footer-content">
<div class="footer-section">
<h3>关于我们</h3>
<p>专注于提供高质量的在线图片处理工具</p>
</div>
<nav class="footer-nav" role="navigation" aria-label="页脚导航">
<h3>快速链接</h3>
<ul>
<li><a href="/image-tools/privacy.html">隐私政策</a></li>
<li><a href="/image-tools/terms.html">使用条款</a></li>
<li><a href="/image-tools/contact.html">联系我们</a></li>
</ul>
</nav>
<div class="footer-contact">
<h3>联系方式</h3>
<p>邮箱：<a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Image Tools. All rights reserved.</p>
</div>
</footer>
<!-- 性能优化：延迟加载JS -->
<script src="js/main.js" defer></script>
</body>
</html>