美文网首页
发布到淘宝手机端的图片为什么会变模糊?

发布到淘宝手机端的图片为什么会变模糊?

作者: 我不是你家美工 | 来源:发表于2020-01-18 13:13 被阅读0次

    见过很多人问过:我在淘宝手机端发布的产品,图片会变得很模糊,这个是为什么呀?

    其实我是不太喜欢回答这类问题的,很麻烦,虽然结果只有一个,统统都是图片模糊,但是原因却是多样的,不同的原因导致的结果,你要考虑到多种原因,大部分人都说只说图片效果是模糊的,却一句也不提具体的问题的所在点,包括截图什么的?具体情况当然还得具体去分析,真的是很头疼。当然这种一问一回答的交流方式也很浪费时间,干脆直接说常见的几种问题所在,你们自己去对应分析下!

    首先必须要明白一点,任何电脑端的图片一旦转换到手机屏幕上去显示,图片的最终质量或多或少都是有一定的影响的,我们最基本的要求是必须要使用高质量的图片,很多人一直说自己的手机端的图片会模糊,分析来复分析去,结果就是原图片就比较模糊了,一转换到手机就更加模糊了!

    接下来着重讲讲经常导致手机端的图片模糊的几个因素!

    先说说主图吧!

    一,最常见的关于图片尺寸问题!

    事实上呢,不管是任何图片,只要是要显示在移动端,由于移动端各种的屏幕显示尺寸不同,图片必须是能自适应各种屏幕尺寸的,而实际上呢,不可能针对所有的屏幕尺寸都做相应的图片尺寸一个一个的来对应,都是采用一种图片的缩放算法来显示自适应屏幕宽度的!只要改变尺寸,就必然会导致图片失真!但是很多都是在可以接受范围的!可以说所有能导致在移动端产生图像模糊的终极原因,都是各种移动端的屏幕尺寸和图片的缩放算法导致的!

    简单的来说,就是那个什么retina屏幕了,具体可以百度下,简单说就是和普通屏幕不一样,普通屏幕大家基本采用一对一的像素来分布,而这个retina屏幕采用的是1比4的像素来分布,把普通屏幕一个像素点来分成4个来搞,自然就是靠算法来就近取色来补充,图片在细节上自然就模糊了!当然一般的解决办法就是做个大图,比原图大2倍就可以解决这类问题,然后根据一套算法,来匹配最合适尺寸的图片!

    iphone6为例:

    设备宽高为375×667,dpr为2,根据上面的方法,设计图就应该×2,为750×1334。所以,为什么淘宝一再要求详情页要750的宽,就是根据这样来定的!基本上就是手淘客户端先读取你的屏幕尺寸,然后在根据你的屏幕像素,算出一套最适合你的屏幕尺寸的图片尺寸来显示!当然,为什么有淘宝的算法来匹配了,可是我的图片仍然模糊呢!其实大部分都是自己作的,他们就是不喜欢按照淘宝建议的尺寸来作图啊!人家都给你算好了,你偏偏不按照套路来!

    其实呢,主图模糊的原因吧,绝大多数还是和图片的尺寸大小有关!

    有人做主图根本不按套路来!一再的强调要做800-800以上的正方形主图!各种尺寸都来,甚至长方形的图片尺寸都有!

    还有的人的主图真的是不按照淘宝的要求来的,非常随意,竟然是长方形的!淘宝的主图明明要求是要正方形的,而且尺寸最好是大于700的,一般我们都是采用800的

    据我所知,电脑端主图是不会强制被拉伸成正方形的,但是到手机端,不同的型号手机比如安卓和苹果版的,对这个主图的处理是不同的,有的是会自动拉伸成正方形的!只要图片的尺寸被改变,尤其是经历过从小变大这种现象,都是我们要避免的!所以,主图最好是直接做成800的,有的人不知道是什么原因,会把主图做成400的,这个我就挺佩服的了,我们一再强调要按照原显示尺寸的2倍图来做!你这个400确实是有点尺寸不够吧,如果对方是个大屏幕的平板呢?淘宝的算法怎么和你匹配,要是你再搞个长方形的图呢,这不是就乱套了吗?

    这是一个移动端的主图展示,是全屏单列展示,被手淘强制拉成一个正方形,网友求助的是图片为什么模糊,而且变形。很明显,应该主图是一个长方形的主图,而且绝对的不是正方形,还有,很可能这个主图不是700以上的尺寸,应该是一个没有按照淘宝主图建议的要求来制作,最后,找来了电脑端的原页面一看,果然是一个300-400的图!

    所以,手淘上的主图图片模糊,绝对是和图片的尺寸的关系最大!一般我们都建议主图,最起码要大于700以上,如720呀,或者760呀,或者800啊,这也是很多时候,我们对于图片模糊这类问题会给出,建议换个尺寸来做做,试试看!当然,实际上呢,由于各种移动版尺寸不同,可能你的这个屏幕尺寸刚刚有最合适的图片尺寸的缩放算法匹配,可是不巧有的人是加大版,有点不是常用尺寸,可能匹配的算法就很有可能不是最优化,但是这也没有办法的事情,只能满足多数人的就好了!

    二,还有一类最常见的关于原图片放大到别的尺寸来使用的问题!

    很多人是会直接把原图会放大到别的尺寸来使用!比如做主图的时候,原图尺寸是400的直接用软件修改成800的图片来使用,然后跑过来问图片为什么会模糊了?

    这一类的就是自己用软件做的图了,这是新手遇见比较多的问题,基本就是突发奇想,把小图图片放大来使用!

    图片尺寸放大会失真,很多人根本没有这个概念,首先,图片一旦经过缩放,尤其是经过由小放大的过程,必然会产生不同程度的虚化。有的人就是喜欢找一些小图来用,尺寸小了怎么办,直接用图片软件放大来用啊!原图片尺寸变大,就得增加很多新的图片细节,这些都是用图片处理软件的算法来计算增加的,并不是完全真实的!颜色越接近的地方,越容易成模糊效果!

    然后你跑过来问我,我的原图其实是很清楚的啊!但是我一放到淘宝上为什么就模糊了呢?

    三,最常见的关于图片保存后输出后的问题!

    很多人根本没有意识到修改编辑后的图片,保存出来后会被某些软件给原图片的质量压缩得有多厉害!很多原图片看起来实际效果还不错,一旦编辑保存后,图片失真得比较厉害,直接就模糊出现噪点了!尤其是那些没有保存图片压缩质量选项的软件,他们保存出来出来的图片是最让人不可控的,是最容易出现模糊的问题之一!

    进一步来说说图片保存压缩问题,很多时候修改编辑完图片后,都有一个保存输出的弹出框,是可以让你选择保存压缩的质量的,比如photoshop

    这是可以设置保存压缩质量的,有的其它软件是没有这个设置参数的,直接自动帮你保存压缩出来了,这类不可控的,对于图片压缩着一个来说是有点要命的,有可能是别的,比如5-6的压缩质量,图片就会丢失不少细节,有的明度比较高的纯色块还会出现模糊和杂点的情况,所以在修改尺寸的地方,最好采用能自己设置的压缩品质的软件!

    所以这类的图片模糊问题,基本可以和两个主要要素有关,一个是尺寸放大,再一个是保存压缩,绝大部分很多人都是栽倒在图片放大尺寸和保存压缩上面的!图片放大失真和图片压缩得太厉害!这些原因导致的图片模糊,就是纯属于本来原图就是比较糟糕的情况了,如果再换算到移动端去显示自然就更加明显的糊了!

    接下来在讲一个详情页的尺寸问题:很多人都是对详情页的尺寸是没有什么概念的,都是直接一键导入转换的,然后很多问题就出现了!(这里我不得不先声明,想要清楚无线端的详情页,千万不要使用这个一键导入详情页到无线端的操作!虽然后面我有描述,但是很多人还是忽略了,不得不提前说一遍!)

    在手机端会有什么图片模糊啊,字变小了看不清楚了这些系列问题!

    更有的简直就是哭笑不得!有的一直说的自己手机端的图片模糊,我看了半天,主图看上去还可以啊!其实他自己说的就是宝贝详情页模糊的图片,具体点说的就是详情页的文字看不清楚,你自己想想电脑端是750的宽,直接换到手机巴掌那么大的一个图,打个比方原先12号的字,一下被缩小到3号字体那么大,肯定是会模糊的啊!这就是为什么很多时候我们要强调手机端详情页图片上的文字,要尽量比平时电脑端的大的多!这是图上的字缩小模糊的问题,他们也一概称为图片模糊!

    同理,图片被等比例缩小,很多细节由于变小了,同原图片相比,也会产生看不清楚,导致图片模糊的现象!所以很多手机端详情页的排版都会重新优化调整下,尽量保持主要产品的版面的占有率,原先是一排6个的图片展示,可以改成一排3个的展示,这样的排版可以避免图片被缩小细节丢失的问题!

    关于详情页,只要你按照的建议750的尺寸来,高度不要超过2500,只要你不要让它图片高度超出要求,什么系统自动回等比例调整至要求内,出现图片高度变形等问题,基本不会怎么模糊的!不要让后台帮你自动调整尺寸,它的保存压缩质量是你不可控制的!尽量让每个图片都是自己按照淘宝要求范围内切割出来的,都是自己优化压缩保存出来的,这样才能基本上保证最后的图片在手机端都是清晰的。不要偷懒,不要让淘宝帮你一键从电脑端导入到手机端详情页,很多后台操作的压缩保存效果是你不可控制的!至少目前一直是这样的情况!

    当然还是偶尔有人会说我就是按上面的要求做的啊,图片还是模糊啊,我们还是这个建议,建议改个尺寸看看,也就是重新设置一下图片高度看看,修改下高度或者宽度,也许就和你手里的移动端屏幕尺寸刚好匹配最优化算法了呢?但是这个方法感觉也有点鸡肋,因为别人的屏幕尺寸比你稍微宽一点或者小一点呢?同样的图片尺寸对于不同尺寸的屏幕,并一定能是2的倍数啊……

    最后,在补充一下,为什么现在的详情页都强调是要建议750,而以前是都是480-620的宽度呢,以前那会都是苹果4s的天下,对应620刚好,现在都是6S了,而且4S基本没人用了,而且没有办法更新了,基本都淘汰掉了,都是大屏幕的尺寸了,现在都鼓励480-1500了,现在的手淘,用苹果的平板大尺寸屏幕来看,尺寸也是自适应的非常好了,比以前好得太多了!

    最后,我想在再次补充下关于详情页的模糊问题,我没想到还是有不少人会继续问这个问题,让我帮忙看看,太麻烦了,而且很多人连问题的具体情况都交代的不清楚!每次都要排除下各种可能,太累了!

    这里一再强调!大多数人详情页里的图片模糊的问题!绝大多数都是使用的淘宝详情页里的编辑操作,一键导入电脑端描述详情页这个设置导致的!想要清楚的图片效果!

    千万不要让淘宝后台帮你一键导入到手机端详情页!

    千万不要让淘宝后台帮你一键导入到手机端详情页!

    千万不要让淘宝后台帮你一键导入到手机端详情页!

    请自己重新再手机端描述里重新上传从自己图片空间编辑一次详情页!就像我们前面说的,千万不要让淘宝后台帮你操作这些,涉及到修改图片尺寸,保存图片等这些操作,他们的优化效果不是你能控制得了的!能把你气哭!

    此外关于详情页的文字和图片,转换到手机端一般都是需要重新调整排版的,文字要尽量比电脑端的要大!同时图片的版面占有率也要有适当的调整!

    相关文章

      网友评论

          本文标题:发布到淘宝手机端的图片为什么会变模糊?

          本文链接:https://www.haomeiwen.com/subject/keukzctx.html