⑴ php 怎么压缩图片后 在发给前端
<?php
/*
----------------------------------------------------------------------
函数:调整图片尺寸或生成缩略图
返回:True/False
参数:
$Image需要调整的图片(含路径)
$Dw=450调整时最大宽度;缩略图时的绝对宽度
$Dh=450调整时最大高度;缩略图时的绝对高度
$Type=11,调整尺寸;2,生成缩略图
$path='img/';//路径
$phtypes=array(
'img/gif',
'img/jpg',
'img/jpeg',
'img/bmp',
'img/pjpeg',
'img/x-png'
);
FunctionImg($Image,$Dw=450,$Dh=450,$Type=1){
IF(!File_Exists($Image)){
ReturnFalse;
}
//如果需要生成缩略图,则将原图拷贝一下重新给$Image赋值
IF($Type!=1){
Copy($Image,Str_Replace(".","_x.",$Image));
$Image=Str_Replace(".","_x.",$Image);
}
//取得文件的类型,根据不同的类型建立不同的对象
$ImgInfo=GetImageSize($Image);
Switch($ImgInfo[2]){
Case1:
$Img=@ImageCreateFromGIF($Image);
Break;
Case2:
$Img=@ImageCreateFromJPEG($Image);
Break;
Case3:
$Img=@ImageCreateFromPNG($Image);
Break;
}
//如果对象没有创建成功,则说明非图片文件
IF(Empty($Img)){
//如果是生成缩略图的时候出错,则需要删掉已经复制的文件
IF($Type!=1){Unlink($Image);}
ReturnFalse;
}
//如果是执行调整尺寸操作则
IF($Type==1){
$w=ImagesX($Img);
$h=ImagesY($Img);
$width=$w;
$height=$h;
IF($width>$Dw){
$Par=$Dw/$width;
$width=$Dw;
$height=$height*$Par;
IF($height>$Dh){
$Par=$Dh/$height;
$height=$Dh;
$width=$width*$Par;
}
}ElseIF($height>$Dh){
$Par=$Dh/$height;
$height=$Dh;
$width=$width*$Par;
IF($width>$Dw){
$Par=$Dw/$width;
$width=$Dw;
$height=$height*$Par;
}
}Else{
$width=$width;
$height=$height;
}
$nImg=ImageCreateTrueColor($width,$height);//新建一个真彩色画布
ImageCopyReSampled($nImg,$Img,0,0,0,0,$width,$height,$w,$h);//重采样拷贝部分图像并调整大小
ImageJpeg($nImg,$Image);//以JPEG格式将图像输出到浏览器或文件
ReturnTrue;
//如果是执行生成缩略图操作则
}Else{
$w=ImagesX($Img);
$h=ImagesY($Img);
$width=$w;
$height=$h;
$nImg=ImageCreateTrueColor($Dw,$Dh);
IF($h/$w>$Dh/$Dw){//高比较大
$width=$Dw;
$height=$h*$Dw/$w;
$IntNH=$height-$Dh;
ImageCopyReSampled($nImg,$Img,0,-$IntNH/1.8,0,0,$Dw,$height,$w,$h);
}Else{//宽比较大
$height=$Dh;
$width=$w*$Dh/$h;
$IntNW=$width-$Dw;
ImageCopyReSampled($nImg,$Img,-$IntNW/1.8,0,0,0,$width,$Dh,$w,$h);
}
ImageJpeg($nImg,$Image);
ReturnTrue;
}
}
?>
<html><body>
<formmethod="post"enctype="multipart/form-data"name="form1">
<table>
<tr><td>上传图片</td></tr>
<tr><td><inputtype="file"name="photo"size="20"/></td></tr>
<tr><td><inputtype="submit"value="上传"/></td></tr>
</table>
允许上传的文件类型为:<?=implode(',',$phtypes)?></form>
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
if(!is_uploaded_file($_FILES["photo"][tmp_name])){
echo"图片不存在";
exit();
}
if(!is_dir('img')){//路径若不存在则创建
mkdir('img');
}
$upfile=$_FILES["photo"];
$pinfo=pathinfo($upfile["name"]);
$name=$pinfo['basename'];//文件名
$tmp_name=$upfile["tmp_name"];
$file_type=$pinfo['extension'];//获得文件类型
$showphpath=$path.$name;
if(in_array($upfile["type"],$phtypes)){
echo"文件类型不符！";
exit();
}
if(move_uploaded_file($tmp_name,$path.$name)){
echo"成功！";
Img($showphpath,100,800,2);
}
echo"<imgsrc="".$showphpath.""/>";
}
?>
</body>
</html>
⑵ 前端性能优化--图片篇
有损压缩，高品质的压缩方式。图片体积压缩至原有体积的50%以下时，jpg仍然可以保持60%的品质。原理为以24位存储单个图，可以呈现多达1600万种颜色，足以满足大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗并不容易被肉眼察觉。
优点：
缺点：
使用场景：
无损压缩，高保真的图片格式。同时支持8位和24位二进制的位数，八位的png最多指出256种颜色，24位可以呈现约1600万种。
优点：
缺点：
使用场景：
最多支持256种颜色的8位无损图片格式。
优点：
缺点：
使用场景：
同时提供了有损压缩和无损压缩（可逆压缩）的图片文件格式。像JPEG一样对细接丰富的图片信手拈来，像PNG一样支持透明，像GIF一样可以显示动态图片。
优点：
缺点：
在压缩文件大小的过程中，损失了一部分图片的信息，也降低了图片的质量，并且这种损失是不可逆的。常见的压缩手段是按照一定的算法将邻近的像素点进行合并，去除了人肉眼无法识别的图片细节。jpg图片使用的就是有损压缩。
在压缩的过程中，图片的质量没有任何损伤。任何时候都可以从无损压缩过的图片中恢复出原来的信息。压缩算法是对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的体积。例如png、gif使用的就是无损压缩。
https://tinypng.com/
https://tu.isux.us/
https://compressor.io/
webpack配置imge-webpack-loader进行图片压缩
1.安装依赖
2.配置webpack
雪碧图，CSS Sprites，国内也叫 CSS 精灵，是一种 CSS 图像合成技术，主要用于小图片显示。
浏览器请求资源的时候，同源域名请求资源的时候有最大并发限制，chrome 为 6 个，就比如你的页面上有 10 个相同 CDN 域名小图片，那么需要发起 10 次请求去拉取，分两次并发。第一次并发请求回来后，发起第二次并发。如果你把 10 个小图片合并为一张大图片的画，那么只用一次请求即可拉取下来 10 个小图片的资源。减少服务器压力，减少并发，减少请求次数。
优点：
缺点：
有相应的插件提供了自动合成雪碧图的功能并且可以自动生成对应的样式文件webpack-spritesmith
将src/ico目录下的所有png文件合成雪碧图，并且输出到对应目录，同时还可以生成对应的样式文件，样式文件的语法会根据你配置的样式文件的后缀动态生成。
将图片转换为base64编码字符串inline到页面或css中。
优点：
缺点：
图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。
优点：
将图片提前加载到本地缓存中，从而提升用户体验。
高品质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高、尺寸小、加载很快。
注：
很多工具和库都支持导出渐进式JPEG，比如 ImageMagick, libjpeg, jpegtran, jpeg-recompress以及imagemin。 也可以使用 gulp-imagemin 进行批量转换。
Photoshop导出渐进式图片，保存为JPEG格式，勾选连续。
⑶ web前端 图片压缩
我的理解应该是生成图片的时候，在不影响图片质量的情况下，尽量用体积小的格式，比如在不透明的情况下尽量把图片保存成png格式。
在css中有一种技术叫做图片精灵，就是把一些背景图做成集合的形式。图片只需加载一次。
最后网上好像是有插件（浏览器也有插件）可以对图片进行压缩处理。
⑷ WEB前端开发中图片压缩工具用什么好
简单一点的用画图工具就行，
要是专业一点的就用Photoshop
但是不管用什么，个人感觉保存图片的格式都很重要。
主要还是以JPG和PNG为主。
⑸ 前端实现图片压缩
获取图片数据 —> 用canvans画图，压缩 —> 压缩后为base64 —> 转成文件格式 —> 上传文件
⑹ 当前使用JS在前端完成图片压缩的有哪些方法
这个base64的编码并不能减小图片，反而增大了，大概增大了1/3。至于有没有其他的方法我就不知道了，不过直接构造Blob对象上传就行了，为什么要上传dataurl
⑺ 极速img：高质量图片压缩，大小减半，清晰度不变
（一）、应用领域
1.证件照压缩
2.设计作品压缩
3.摄影作品压缩
4.内容编辑素材压缩
5.前端工程师切图压缩等
（二）、应用场景
1.证件照压缩
（1) 在网上报名各种考试或比赛的时候，需要上传免冠照片，但都会要求在几十K以下，极速img压缩之后就可以轻松上传
（2) 填写简历时往往要上传学历证书，获奖证书等证件，图片太大就不能上传，使用极速img压缩后，图片大小减少了，且清晰度不变
（3) 互联网公司在应用商店和媒体平台开通账户时，都需要公司的营业执照和各种文件证明，同样也会有图片大小的限制，但又要保证清晰度才能通过审核，用极速img压缩最适合
2.设计作品压缩
（1) 设计师和摄影师有大量的设计作品，都会占用很大的存储空间，使用极速img压缩后不仅能节省50%-70%的空间，也使设计师在协同传输时更快速
3.内容编辑素材压缩
（1) 内容编辑在后台编辑内容上传素材图片时，对图片大小也有要求，但缺少了图片，内容就不够丰富，极速img压缩恰好能完美解决这些问题
4.前端工程师切图压缩
（1) 前端工程师需要大量切图，但大量图片会让网站或APP打开速度变慢，使用极速img一键批量压缩后, 网站或APP打开速度飞快！
可以通过我们提供的SDK&API，可以快速整合到自己的APP、软件、站点等需要图片智慧服务的地方！
如电商平台、图片平台、医疗教育、人工智能、社交应用、保险系统等均适用！