Ⅰ 前端开发中，对图片的优化技巧有哪些
阶段一、图片从PS中出来的时候：
1、大图jpg，保存为连续模式。可以有模糊渐显的效果。普通的是扫描打印效果。
2、小图icon，http1.x服务器的话整在一起导出。http2.0服务器就无所谓了，可单个保存。
3、部分不适合与2切在一起的小图片，使用base64编码字符串代替。
阶段二、图片在代码中使用的时候：
1、图片保存在额外CDN服务器。可节省代码服务器空间，加快图片访问。
2.1、在图片即将进入到视野范围内时再加载，可节省流量，加快首屏展示。
2.2、在网络空闲的时候预加载后续的图片可以让用户等待时间更少。
3、考虑SEO的话，非内容的图片使用背景代替？
4、好的图片CDN自带图像处理功能，诸如裁剪压缩之类的功能，可以上传一张大图，使用带有不同参数的url来在不同的场景中使用图片。
阶段三、项目上线
1、尽量不要让图片链接失效好了
Ⅱ 网站首页过长图片又多，怎么优化呀
我们知道用户都喜欢浏览速度快的网站，不喜欢花费太多的时间等待网页的打开，等待的时间过长，会让用户失去耐心，甚至烦躁时会直接关闭网页，这样就会失去一些潜在的客户了。其次，关键字的排名与网页的打开速度也有关系，谷歌Google的Web搜索团队在官方博客上宣布，将把网站的速度作为PR（PageRank）算法的一个因子，在所有因素都相等的情况下，速度快的网站将排在速度慢的网站前面。
因此我觉得我们有必要去提高网页的打开速度，下面我来教大家一些小技巧提高网页的打开速度。
1.优化css。我们知道css的出现，使内容和元素的表现方法分离，用户打开用css设计的网页，css一般被下载用户本地计算机，不像html元素表现标签，每次网站的网页都要调用一次，使用css，只需要一次就好了！另外，css在某些地方可以替代图片，这就是为什么现在提倡div+css的原因！不过，使用dw写css，也会有些多余的css代码。Css太臃肿的话，也会影响网页的速度，这里介绍一款工具cleancss给大家试试，它是一款在线工具。另外就是手工精简代码，这个确实有这个对于新手确实有难度，不过，多看一些精简css技巧的文章会对你有帮助的，看得多了，也就知道那些代码可以精简了。
2.优化图片。这个没有什么技巧，通过软件就搞定了。我喜欢用ps，在ps中选择存储web所用格式，然后选择图片的质量等选项，图片看起来很清楚，大小又合适保存就可以了。
3.图片格式问题。选择正确的图片格式是非常重要的。Jpg一般用于照片或真彩色图片，gif运用平面色彩的图片，一般用于按钮或logo图片，png和gif非常相似，不过就是多支持一些色彩！
4.图片长宽的标记问题。这个问题一般在html中可以看到，一些人经常忘记写图片的长和宽了。这些标记是告诉浏览器打开图片之前的尺寸，浏览器加载网页时就会保留一块区域，加快整个网页显示速度。
5.在url中要学会用”/”。当一个用户打开类似一个url后面没有”/”，服务器就要确定什么类型的文件或是网页，这时你在网址后面加一个”/”，这时服务器就知道是一个目录的页面，减少载入时间。
6.减少网页的响应次数。对于网页的打开，其实是很复杂的过程。从网页的申请打开，到web服务器的响应，编译等动作，然后发回给浏览器，才显示我们面前的文字和图片，多媒体文件等。所以我要尽量减少响应次数，现在ajax在这方面就运用的不错。当然，一个静态页面就例外了，静态页面多注意图片大小和网页设计上就行了。
Ⅲ 首页图片多，显示慢怎么解决
降低图片质量,可以使用GIF格式的,对表格进行优化,使用TBODY,这样可以加快速度了~~再就是首页不要过多的调用数据库.
Ⅳ 首页图片太多了网站怎么优化
给每张图片加上alt标签
还可以在代码里面天加上h1标签
但是可以隐藏起来，那样前台是看不到的每个图片的alt标签不要相同哦
坚持就是胜利
Ⅳ 网站是大多由图片构建的。且页面较多。该怎么选关键字，该怎么优化啊。
企业站的话关键词当然首选产品名，个人站主要看网站主题。图片多了是会增加美观但一定程度上影响页面速度，这个也可以通过一些其他途径解决如：网站备案使用国内服务器，相对增加空间大小等。只要不是过于慢对优化影响不是太大。页面的多少不影响优化，但页面的质量很关键，主要是页面必须流畅有回路，网络蜘蛛从首页进入每个页面必须可以返回首页，每个页面做个底部连接是个不错的方法。多检查检查页面的连接情况消除死连等因数。优化说难不难说简单不简单，关键你要细心、有耐心新站会有磨和期，多多更新，发质量高的文章（原创或伪原创），多和有质量的网站做做友情连接，起步阶段可以适当买点连接。
总的来说优化的主关键还是在于：页面质量、更新度、外连数。这几大因数，多找找优化文章吧。多找点站长工具会解决你很多麻烦。
Ⅵ 网页首页大量GIF图片，显示速度有问题
这种情况是多方面的，主要和浏览器及Flash插件等有关，和网络环境也有关。先清理掉不需要的插件和系统垃圾，不要开太多联网程序。
Ⅶ 前端如果有成千上万的页面该如何处理
一、图片处理
1. 图片：大小的控制与使用
以淘宝为例，你搜索的所有产品的列表页面，每个产品都有一个概略图（小图），
点开一个产品的页面可以看到产品展示图（中图），点击图片后可以看到原始图（大图），如果上面提到的三个页面都用用户上传的原始图，仅用控制显示大小，页面性能如何，可想而知，用PC机还好，如果用户用移动设备加3G网络访问，5分钟也打不页面，就是打开了，流量也用完了。
所以我们说为你的网站针对不同的情况不同的页面，采用不同的图像文件，当然屏幕分辨率也要考虑进去，如果有人用iphone打开和ipad打开，就不需要显示像PC机上那么大的图片了，只要适应设备就可以了，那你可能要问怎么做。
通过CSS Media Querises,可以轻松做到，你可以访问http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 压缩
传送图像的时候单单控制适当的尺寸往往是不够的。不少文件格式在不失真的前提下可以被压缩很多。有一类应用程序可以达到这个效果。比如Photoshop有个很好的功能叫做Save for Web and Devices，还有我个人觉得多用PNG是个可以考虑的方案
3. Sprite
增加应用程序性能的方法之一，是减少到服务器的请求数。每一个新图像代表一个请求数。有一个办法是将几个图片合并成一个，合并之后的图像叫做一个sprite，这个功能在淘宝你也会发现，在CSS中改变背景层的位置，就能准确的把特定部分的图像显示出来。比如Twitter Bootstrap利用sprites来制作内部图标，访问http://getbootstrap.com/2.3.2/ 你会了解更多
在CSS中，你可以参照以下方式，显示你喜欢的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速缓存
浏览器超高速缓存十分好用。尽管有时在开发过程中会导致一些非常有趣的情况，但它确实有助于提高你的网站的性能。所有浏览器的超高速缓存下来的内容包括图片、JavaScript或者CSS。有几种方法可以控制缓存，建议你阅读相关文章。
5. 预读取
HTML 5有一个很好的功能叫做预读取，它让浏览器提前下载你马上需要用到的资源：
<link rel="prefetch" href="/images/background.jpg">
6. 数据URI方案/内联图像
几年前我曾开发了一个简单的网页，只包含一个HTML文件夹，但当然里面应该还包括一些我需要的图像。数据URI方案帮助我解决了问题。我们的想法是将图像转换成一个base64编码的字符串，并将其放置在src属性中的img标签里，例如：
Html代码
<img src="data:image/png;base64,//8/==" alt="Red dot">
通过这种方法，你的图像实际上在HTML中并保存了一个HTTP请求。你的图像越大的话，字符串就越长。
Ⅷ 网站优化的问题（图片和js过多）怎样优化
js尽量放到网站底部
一 ALT标签 .
图片一定要添加ALT标签，ALT标签在图片搜索中占着很重要位置，你做的是什么图片，这个ALT标签就要有这个文字，刘德华的图片，就要告诉搜索引擎，我不是周杰伦。 ..
二 图片标题 版权申明
这点和网页优化中的Title标题一样，是个什么内容的图片，就给这张图片取个相符的标题。 .
三 图片格式 。
目前，搜索引擎图片库中，大多数图片的文件格式是JPG，JPEG，JIF，就以JPG，JPEG，GIF为后缀来完成图片。 .
四 图片文字介绍 .
排在前面的图片，基本都是关于这张图片的一个专栏介绍，以告诉搜索引擎这个图片的重要性。 .
五 外部链接 .
网站优化需要外部链接，同样，图片的seo优化也是需要外部链接，链接始终是网络的最根本基础，最优秀的图片才会在网络上蔓延，搜索引擎也就是分析这张图片的外部链接，从而来判断这张图片是不是受欢迎。 .
目前，SEO行业内大家都把眼光主要盯在网络，GOOLGE，YAHOO等各大搜索引擎的网页搜索上，对其它产品的搜索优化则研究的甚少，网络众多产品中除了网页搜索，MP3搜索，图片搜索同样聚集着巨大的人气。根据本人的小站来路数据统计显示，目前图片搜索约占网络总搜索量的55%-60%，所以针对“网络图片搜索优化”是一件很值得我们去做的事情 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!
然而针对网络做图片搜索的搜索引擎优化，并不是一件容易的事情，它不像网页搜索引擎优化那么容易研究。主要原因，目前搜索引擎并不能很好的识别出图片信息，图片不像文字那样，搜索引擎对文字内容的识别，可以通过自身的文字识别系统，来判别出，即便是搜索出来的信息有偏差，但也不会太离谱。但图片的组成信息是二进制机器码，即使是像GOOGLE这样的搜索引擎，也还不能很好的识别哪张图片才是最重要的图片。所以，更多的希望我们进一步的去探索和研究。 .
Ⅸ 网站首页过长图片又多怎么优化
那就把首页不必要的内容去掉一些，图片只放优质的图片，不必要的图片就删掉吧，省得占空间，删繁留简，越简洁越好，看着也整洁，视觉效果会更略胜一筹的。