[{"data":1,"prerenderedAt":828},["ShallowReactive",2],{"blog-post-/blog/zh-cn/how-to-prepare-product-images-for-ecommerce":3,"related-posts-/zh-CN/blog/how-to-prepare-product-images-for-ecommerce":208},{"id":4,"title":5,"author":6,"body":7,"category":190,"date":191,"description":192,"extension":193,"featured":194,"image":195,"meta":196,"navigation":197,"path":198,"readingTime":199,"seo":200,"stem":201,"tags":202,"tools":206,"__hash__":207},"content/blog/zh-CN/how-to-prepare-product-images-for-ecommerce.md","如何为电商准备产品图片","Anything Tools Editorial",{"type":8,"value":9,"toc":179},"minimark",[10,13,17,36,40,43,46,68,71,74,80,83,97,100,103,114,120,123,126,132,135,147,150,153,173,176],[11,12,5],"h1",{"id":5},[14,15,16],"p",{},"产品图片会直接影响电商页面的加载速度、信任感和转化率。图片太大，页面会变慢；图片太小，细节不清晰；格式选错，还可能让透明背景、颜色或文件体积出现问题。",[14,18,19,20,25,26,30,31,35],{},"在上传图片前，可以先用 Anything Tools 的 ",[21,22,24],"a",{"href":23},"/image/resizer","Image Resizer","、",[21,27,29],{"href":28},"/image/compressor","Image Compressor"," 和 ",[21,32,34],{"href":33},"/image/converter","Image Converter"," 做一次轻量处理。",[37,38,39],"h2",{"id":39},"先确认图片用途",[14,41,42],{},"不同位置需要不同尺寸。不要把同一张超大原图直接上传到所有位置。",[14,44,45],{},"常见用途包括：",[47,48,49,53,56,59,62,65],"ul",{},[50,51,52],"li",{},"商品主图",[50,54,55],{},"商品详情图",[50,57,58],{},"缩略图",[50,60,61],{},"分类页图片",[50,63,64],{},"邮件或广告素材",[50,66,67],{},"社交分享图",[14,69,70],{},"主图应该保留足够细节，缩略图则更关注体积和清晰轮廓。",[37,72,73],{"id":73},"调整到合适尺寸",[14,75,76,77,79],{},"大多数在线商店不需要几千像素宽的图片。先根据模板或平台要求确定尺寸，再用 ",[21,78,24],{"href":23}," 批量调整。",[14,81,82],{},"实用建议：",[47,84,85,88,91,94],{},[50,86,87],{},"主图保持正方形或统一比例",[50,89,90],{},"同一分类下图片尺寸一致",[50,92,93],{},"避免上传远大于展示尺寸的原图",[50,95,96],{},"为高分屏保留适当清晰度，但不要无限放大",[37,98,99],{"id":99},"选择正确格式",[14,101,102],{},"格式会影响透明背景、画质和文件大小。",[47,104,105,108,111],{},[50,106,107],{},"JPG：适合普通商品照片",[50,109,110],{},"PNG：适合需要透明背景的图标、logo 或截图",[50,112,113],{},"WebP：适合在画质和体积之间取得平衡",[14,115,116,117,119],{},"如果原图格式不合适，可以用 ",[21,118,34],{"href":33}," 转换后再上传。",[37,121,122],{"id":122},"压缩但不要牺牲关键信息",[14,124,125],{},"压缩图片的目标不是把文件变得越小越好，而是在加载速度和细节之间取得平衡。产品纹理、颜色和文字标签仍然要清楚。",[14,127,128,129,131],{},"可以用 ",[21,130,29],{"href":28}," 先压缩，再在手机和桌面端预览效果。",[37,133,134],{"id":134},"使用清晰文件名",[14,136,137,138,142,143,146],{},"文件名也会影响后续维护和图片 SEO。比起 ",[139,140,141],"code",{},"IMG_1234.jpg","，更推荐使用描述性名称，例如 ",[139,144,145],{},"blue-running-shoes-side-view.jpg","。",[37,148,149],{"id":149},"发布前检查清单",[14,151,152],{},"上传前快速检查：",[47,154,155,158,161,164,167,170],{},[50,156,157],{},"尺寸是否符合页面位置",[50,159,160],{},"文件体积是否合理",[50,162,163],{},"透明背景是否保留",[50,165,166],{},"商品主体是否居中",[50,168,169],{},"文件名是否可读",[50,171,172],{},"移动端是否清晰",[37,174,175],{"id":175},"总结",[14,177,178],{},"电商图片准备不只是压缩文件。更好的流程是：确定用途，调整尺寸，选择格式，压缩图片，命名文件，再做最终预览。这样可以让商品页更快、更清晰，也更容易维护。",{"title":180,"searchDepth":181,"depth":181,"links":182},"",2,[183,184,185,186,187,188,189],{"id":39,"depth":181,"text":39},{"id":73,"depth":181,"text":73},{"id":99,"depth":181,"text":99},{"id":122,"depth":181,"text":122},{"id":134,"depth":181,"text":134},{"id":149,"depth":181,"text":149},{"id":175,"depth":181,"text":175},"图片优化","2026-05-05T00:00:00.000Z","上传到网店前，调整尺寸、压缩、转换格式和命名产品图片的实用清单。","md",false,"/blog/how-to-prepare-product-images-for-ecommerce.png",{},true,"/blog/zh-cn/how-to-prepare-product-images-for-ecommerce",6,{"title":5,"description":192},"blog/zh-CN/how-to-prepare-product-images-for-ecommerce",[203,204,205],"Product Images","E-commerce","Image Optimization",[23,28,33],"GLnpYtjrwZ2jJS98EfkkEgMVCzPkoVWNf1kkeCqvg9A",[209,741],{"id":210,"title":211,"author":212,"body":213,"category":190,"date":727,"description":728,"extension":193,"featured":194,"image":729,"meta":730,"navigation":197,"path":731,"readingTime":199,"seo":732,"stem":733,"tags":734,"tools":738,"__hash__":740},"content/blog/zh-CN/avif-vs-webp-comparison.md","AVIF vs WebP: 2026年哪种图片格式最好？","Anything Tools 团队",{"type":8,"value":214,"toc":708},[215,218,229,236,240,349,353,358,363,383,387,393,397,417,420,424,427,440,444,447,451,465,478,615,618,621,624,627,647,650,661,665,670,678,683,694,704],[11,216,211],{"id":217},"avif-vs-webp-2026年哪种图片格式最好",[14,219,220,221,225,226,146],{},"在追求更快的网站和更好的用户体验的过程中，图片优化起着至关重要的作用。多年来，",[222,223,224],"strong",{},"WebP"," 一直是 JPEG 和 PNG 的挑战者。但现在，一个新的竞争者出现了：",[222,227,228],{},"AVIF",[14,230,231,232,235],{},"在本指南中，我们将比较 ",[222,233,234],{},"AVIF vs WebP","，帮助您决定哪种下一代格式适合您 2026 年的项目。",[37,237,239],{"id":238},"概览结论","概览：结论",[241,242,243,260],"table",{},[244,245,246],"thead",{},[247,248,249,253,255,257],"tr",{},[250,251,252],"th",{},"特性",[250,254,224],{},[250,256,228],{},[250,258,259],{},"胜者",[261,262,263,282,299,316,333],"tbody",{},[247,264,265,271,274,277],{},[266,267,268],"td",{},[222,269,270],{},"压缩",[266,272,273],{},"好 (比 JPEG 小 25-35%)",[266,275,276],{},"优秀 (比 JPEG 小 50%+)",[266,278,279,280],{},"🏆 ",[222,281,228],{},[247,283,284,289,292,295],{},[266,285,286],{},[222,287,288],{},"质量",[266,290,291],{},"中/高比特率下表现良好",[266,293,294],{},"低比特率下表现卓越",[266,296,279,297],{},[222,298,228],{},[247,300,301,306,309,312],{},[266,302,303],{},[222,304,305],{},"浏览器支持",[266,307,308],{},"通用 (97%+)",[266,310,311],{},"优秀 (93%+)",[266,313,279,314],{},[222,315,224],{},[247,317,318,323,326,329],{},[266,319,320],{},[222,321,322],{},"编码速度",[266,324,325],{},"快",[266,327,328],{},"较慢",[266,330,279,331],{},[222,332,224],{},[247,334,335,339,342,345],{},[266,336,337],{},[222,338,252],{},[266,340,341],{},"透明度, 动画",[266,343,344],{},"透明度, 动画, HDR, 广色域",[266,346,279,347],{},[222,348,228],{},[37,350,352],{"id":351},"什么是-webp","什么是 WebP？",[14,354,355,357],{},[222,356,224],{}," 是 Google 于 2010 年开发的一种图片格式。它使用预测编码比 JPEG 或 PNG 更有效地压缩图片。",[359,360,362],"h3",{"id":361},"webp-的主要优势","WebP 的主要优势：",[47,364,365,371,377],{},[50,366,367,370],{},[222,368,369],{},"广泛支持："," 支持所有主流浏览器（Chrome, Firefox, Safari, Edge）。",[50,372,373,376],{},[222,374,375],{},"多功能："," 支持有损和无损压缩，以及透明度（alpha 通道）和动画。",[50,378,379,382],{},[222,380,381],{},"性能："," 通常比同类 JPEG 图片小 25-35%。",[37,384,386],{"id":385},"什么是-avif","什么是 AVIF？",[14,388,389,392],{},[222,390,391],{},"AVIF (AV1 Image File Format)"," 是一种源自 AV1 视频编解码器关键帧的较新格式。它由开放媒体联盟 (AOMedia) 于 2019 年发布。",[359,394,396],{"id":395},"avif-的主要优势","AVIF 的主要优势：",[47,398,399,405,411],{},[50,400,401,404],{},[222,402,403],{},"卓越压缩："," 在相同质量下，可以比 JPEG 小 50%，比 WebP 小 20-30%。",[50,406,407,410],{},[222,408,409],{},"高质量："," 与 WebP（可能会出现块状）相比，在极小的文件大小下仍能保持更好的结构细节。",[50,412,413,416],{},[222,414,415],{},"高级特性："," 原生支持 HDR（高动态范围）和广色域 (WCG)。",[37,418,419],{"id":419},"详细对比",[359,421,423],{"id":422},"_1-文件大小与压缩","1. 文件大小与压缩",[14,425,426],{},"AVIF 在这里是明显的赢家。其压缩算法更先进，能够将更多数据压缩到更少的字节中。在我们的测试中：",[47,428,429,435],{},[50,430,431,432,434],{},"100KB JPEG 转换为 ",[222,433,224],{},": ~70KB",[50,436,431,437,439],{},[222,438,228],{},": ~50KB",[359,441,443],{"id":442},"_2-视觉质量","2. 视觉质量",[14,445,446],{},"在较小的文件大小下，WebP 倾向于引入“块状”或涂抹伪影。另一方面，AVIF 可能会丢失一些细微的纹理/颗粒，但通常能更好地保留边缘和形状，即使在激进的压缩水平下，也能产生更令人愉悦的图像。",[359,448,450],{"id":449},"_3-浏览器支持-2026","3. 浏览器支持 (2026)",[47,452,453,459],{},[50,454,455,458],{},[222,456,457],{},"WebP:"," 基本得到所有支持。作为主要格式使用是安全的。",[50,460,461,464],{},[222,462,463],{},"AVIF:"," 支持 Chrome, Firefox, Safari (iOS 16+, macOS Ventura+), 和 Edge。全球支持率超过 93%。",[466,467,468],"blockquote",{},[14,469,470,473,474,477],{},[222,471,472],{},"建议："," 使用 ",[139,475,476],{},"\u003Cpicture>"," 标签向现代浏览器提供 AVIF，并为旧浏览器回退到 WebP 或 JPEG。",[479,480,484],"pre",{"className":481,"code":482,"language":483,"meta":180,"style":180},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cpicture>\n  \u003Csource srcset=\"image.avif\" type=\"image/avif\">\n  \u003Csource srcset=\"image.webp\" type=\"image/webp\">\n  \u003Cimg src=\"image.jpg\" alt=\"描述\">\n\u003C/picture>\n","html",[139,485,486,502,540,571,605],{"__ignoreMap":180},[487,488,491,495,499],"span",{"class":489,"line":490},"line",1,[487,492,494],{"class":493},"sMK4o","\u003C",[487,496,498],{"class":497},"swJcz","picture",[487,500,501],{"class":493},">\n",[487,503,504,507,510,514,517,520,524,526,529,531,533,536,538],{"class":489,"line":181},[487,505,506],{"class":493},"  \u003C",[487,508,509],{"class":497},"source",[487,511,513],{"class":512},"spNyl"," srcset",[487,515,516],{"class":493},"=",[487,518,519],{"class":493},"\"",[487,521,523],{"class":522},"sfazB","image.avif",[487,525,519],{"class":493},[487,527,528],{"class":512}," type",[487,530,516],{"class":493},[487,532,519],{"class":493},[487,534,535],{"class":522},"image/avif",[487,537,519],{"class":493},[487,539,501],{"class":493},[487,541,543,545,547,549,551,553,556,558,560,562,564,567,569],{"class":489,"line":542},3,[487,544,506],{"class":493},[487,546,509],{"class":497},[487,548,513],{"class":512},[487,550,516],{"class":493},[487,552,519],{"class":493},[487,554,555],{"class":522},"image.webp",[487,557,519],{"class":493},[487,559,528],{"class":512},[487,561,516],{"class":493},[487,563,519],{"class":493},[487,565,566],{"class":522},"image/webp",[487,568,519],{"class":493},[487,570,501],{"class":493},[487,572,574,576,579,582,584,586,589,591,594,596,598,601,603],{"class":489,"line":573},4,[487,575,506],{"class":493},[487,577,578],{"class":497},"img",[487,580,581],{"class":512}," src",[487,583,516],{"class":493},[487,585,519],{"class":493},[487,587,588],{"class":522},"image.jpg",[487,590,519],{"class":493},[487,592,593],{"class":512}," alt",[487,595,516],{"class":493},[487,597,519],{"class":493},[487,599,600],{"class":522},"描述",[487,602,519],{"class":493},[487,604,501],{"class":493},[487,606,608,611,613],{"class":489,"line":607},5,[487,609,610],{"class":493},"\u003C/",[487,612,498],{"class":497},[487,614,501],{"class":493},[37,616,617],{"id":617},"如何转换图片",[14,619,620],{},"您不需要昂贵的软件来创建下一代图片。",[359,622,623],{"id":623},"在线工具",[14,625,626],{},"您可以使用我们的免费工具来转换您的图片：",[47,628,629,635,641],{},[50,630,631],{},[21,632,634],{"href":633},"/image/converter/jpg-to-webp","JPG 转 WebP",[50,636,637],{},[21,638,640],{"href":639},"/image/converter/png-to-avif","PNG 转 AVIF",[50,642,643],{},[21,644,646],{"href":645},"/image/converter/heic-to-jpg","HEIC 转 JPG",[359,648,649],{"id":649},"命令行",[14,651,652,653,656,657,660],{},"对于开发人员，像 ",[139,654,655],{},"ffmpeg"," (用于 AVIF) 或 ",[139,658,659],{},"cwebp"," (用于 WebP) 这样的工具是批量处理的强大选择。",[37,662,664],{"id":663},"结论您应该使用哪一个","结论：您应该使用哪一个？",[14,666,667],{},[222,668,669],{},"使用 WebP 如果：",[47,671,672,675],{},[50,673,674],{},"您需要最大的兼容性而无需回退策略。",[50,676,677],{},"您需要快速的编码速度（例如，动态生成图片）。",[14,679,680],{},[222,681,682],{},"使用 AVIF 如果：",[47,684,685,688,691],{},[50,686,687],{},"您想要绝对最小的文件大小以实现最快的页面加载。",[50,689,690],{},"您需要 HDR 支持或更高位深度的颜色。",[50,692,693],{},"您乐于使用回退标签。",[14,695,696,699,700,703],{},[222,697,698],{},"最终结论："," 在 2026 年，",[222,701,702],{},"AVIF 是性能的最佳选择","，但 WebP 仍然是一个坚实、普遍支持的主力。最好的策略通常是两者都用。",[705,706,707],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":180,"searchDepth":181,"depth":181,"links":709},[710,711,714,717,722,726],{"id":238,"depth":181,"text":239},{"id":351,"depth":181,"text":352,"children":712},[713],{"id":361,"depth":542,"text":362},{"id":385,"depth":181,"text":386,"children":715},[716],{"id":395,"depth":542,"text":396},{"id":419,"depth":181,"text":419,"children":718},[719,720,721],{"id":422,"depth":542,"text":423},{"id":442,"depth":542,"text":443},{"id":449,"depth":542,"text":450},{"id":617,"depth":181,"text":617,"children":723},[724,725],{"id":623,"depth":542,"text":623},{"id":649,"depth":542,"text":649},{"id":663,"depth":181,"text":664},"2026-01-20T00:00:00.000Z","AVIF 和 WebP 图片格式的全面对比。了解压缩、质量、浏览器支持，以及你应该为网站选择哪一种。","/blog/avif-vs-webp.jpg",{},"/blog/zh-cn/avif-vs-webp-comparison",{"title":211,"description":728},"blog/zh-CN/avif-vs-webp-comparison",[228,224,735,736,737],"图片压缩","Web性能","SEO",[739],"/image/converter/webp-to-avif","jqWa8FmqlGQKj-pOHoftQkBdYQJ30TFeiATXbCEvCy4",{"id":742,"title":743,"author":744,"body":745,"category":190,"date":814,"description":815,"extension":193,"featured":194,"image":816,"meta":817,"navigation":197,"path":818,"readingTime":819,"seo":820,"stem":821,"tags":822,"tools":826,"__hash__":827},"content/blog/zh-CN/how-to-compress-images-for-faster-page-speed.md","如何压缩图片以提升页面加载速度","Anything Tools 编辑部",{"type":8,"value":746,"toc":807},[747,749,752,756,759,763,769,773,779,783,800,804],[11,748,743],{"id":743},[14,750,751],{},"图片过大，仍然是网页变慢最常见的原因之一。它会先伤害移动端体验，也会拖累 Core Web Vitals。",[37,753,755],{"id":754},"why-compression-matters","Why compression matters",[14,757,758],{},"Large images increase download weight, slow perceived load time, and make Core Web Vitals harder to improve.",[37,760,762],{"id":761},"pick-the-right-format-first","Pick the right format first",[14,764,765,766,768],{},"Use JPG for photos, PNG for graphics with transparency, and WebP when you want a modern web delivery format. You can compare options with the ",[21,767,34],{"href":33},".",[37,770,772],{"id":771},"resize-before-compressing","Resize before compressing",[14,774,775,776,778],{},"Do not compress a 4000px image if the layout only needs 1200px. Start with the ",[21,777,24],{"href":23},", then compress the smaller file.",[37,780,782],{"id":781},"delivery-workflow","Delivery workflow",[784,785,786,789,792,797],"ol",{},[50,787,788],{},"Export the original asset.",[50,790,791],{},"Resize to the real display range.",[50,793,794,795,768],{},"Compress with ",[21,796,29],{"href":28},[50,798,799],{},"Recheck the page and compare before/after in the browser.",[37,801,803],{"id":802},"final-takeaway","Final takeaway",[14,805,806],{},"For better page speed, think in this order: dimensions first, format second, compression third.",{"title":180,"searchDepth":181,"depth":181,"links":808},[809,810,811,812,813],{"id":754,"depth":181,"text":755},{"id":761,"depth":181,"text":762},{"id":771,"depth":181,"text":772},{"id":781,"depth":181,"text":782},{"id":802,"depth":181,"text":803},"2026-03-24T00:00:00.000Z","一套实用的图片压缩流程：选对格式、先缩尺寸再上传，并在画质与 Core Web Vitals 之间找到平衡。","/blog/how-to-compress-images-for-faster-page-speed.png",{},"/blog/zh-cn/how-to-compress-images-for-faster-page-speed",7,{"title":743,"description":815},"blog/zh-CN/how-to-compress-images-for-faster-page-speed",[735,823,824,825,737],"页面速度","Core Web Vitals","网页性能",[28],"5bRFNqi3gVI2yUSDPmD7u3hPzoeWX2Ia0UjPve4Nlpk",1781687095949]