图片在不同浏览器中显示效果不同的原因主要涉及以下几个方面：
渲染引擎差异：不同的浏览器使用不同的渲染引擎来解析和显示网页内容。例如，Chrome使用Blink引擎，Firefox使用Gecko引擎，而Safari使用WebKit引擎。这些引擎在解析HTML和CSS时的表现可能略有不同，导致图片的加载、布局和显示效果存在差异。
CSS兼容性问题：图片的显示效果往往依赖于CSS样式，如位置、大小、边框等。不同的浏览器对CSS标准的支持程度不同，某些特定的CSS属性或值可能在某些浏览器中不被支持或表现不一致。例如，某些浏览器可能对CSS3的滤镜效果支持不完全，导致图片的视觉效果不同。
JavaScript执行差异：现代网页中，图片的加载和显示常常通过JavaScript来实现。不同的浏览器在JavaScript引擎的执行效率和兼容性上存在差异，这可能导致图片的加载顺序、动画效果等表现不同。
图片格式支持：不同的浏览器对图片格式的支持程度不同。例如，某些浏览器可能不完全支持PNG或WebP等新图片格式，导致这些格式的图片无法正确显示或显示效果不佳。
操作系统和硬件差异：操作系统的不同也可能影响浏览器的表现。例如，某些操作系统可能对特定浏览器的优化不足，导致渲染速度和效果不同。此外，硬件配置的不同（如显卡性能）也会影响图片的渲染效果。
浏览器设置和插件：用户在浏览器中的设置和安装的插件也可能影响图片的显示效果。例如，浏览器的隐私设置、缩放比例、抗锯齿设置等都会对图片的显示产生影响。
为了解决这些问题，开发者通常会采用跨浏览器兼容的设计方法，例如使用通用的CSS属性、提供多种图片格式备份、进行跨浏览器测试等。通过这些方法，可以尽量确保图片在不同浏览器中都能正确显示。