⑴ 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、軟體、站點等需要圖片智慧服務的地方！
如電商平台、圖片平台、醫療教育、人工智慧、社交應用、保險系統等均適用！