使用ImageSharp将JPG/PNG转WebP时色彩丢失问题求助

常见原因及对应方案 #

• 色彩空间未保留
  JPG/PNG多采用sRGB色彩空间，若转换WebP时未明确保留ICC配置文件，ImageSharp可能自动转换色域导致色彩偏差。
  解决：在WebP参数中添加&icc=true强制保留原色彩配置文件，同时显式设置压缩质量避免细节丢失：

  var webpAppendix = "&format=webp&orient=false&icc=true&quality=80";
  

• 透明通道处理不当
  带Alpha通道的PNG转WebP时，默认参数可能导致透明边缘色彩失真。
  解决：补充&alphaQuality=100参数，确保透明区域色彩还原：

  var webpAppendix = "&format=webp&orient=false&icc=true&quality=80&alphaQuality=100";
  

• 旧版本ImageSharp的bug
  早期版本的ImageSharp在WebP色彩处理上存在缺陷，建议升级到最新稳定版。

修改后的完整代码 #

public static string? GetOptimisedCropUrl(this IPublishedContent? image, string crop, bool convertWebp=true) {
    if (image == null) {
        return null;
    }

    var webpAppendix = "&format=webp&orient=false&icc=true&quality=80&alphaQuality=100";
    if (!convertWebp) {
        webpAppendix = "&format=jpg&quality=80";
    }
    
    if (!string.IsNullOrWhiteSpace(crop)) return image.GetCropUrl(crop) + webpAppendix;
    
    var imageHeight = image.GetProperty("height")?.GetValue()?.SafeCast<int>();
    var imageWidth = image.GetProperty("width")?.GetValue()?.SafeCast<int>();

    if (imageHeight is >= 1440 && imageWidth is >= 2560) {
        return image.GetCropUrl("LargeImageCrop") + webpAppendix;
    }
    return image.Url() + "?width=" + imageWidth + "&height=" + imageHeight + webpAppendix;
}

内容的提问来源于stack exchange，提问作者Klinger