圖片太大前端如何解決

『壹』 我的電腦打開圖片顯示太大怎麼辦

我的電腦打開圖片顯示太大，出現這種情況，可以用以下方法解決：
在桌面的空白處：右擊——內容——設定——屏幕解析度（正常圖像素是1152*864）。

像素是指基本原色素及其灰度的基本編碼。像素是構成數碼影像的基本單元，通常以像素每英寸PPI（pixels per inch）為單位來表示影像解析度的大小。

『貳』 照片太大，如何縮小

照片文件太大需要壓縮變小100KB，又要批量壓縮照片圖片文件，但是照片&圖片畫面清晰質量不變，可以使用以下操作方法:

1、獲取工具「秒會壓縮大師」，選擇操作

3、壓縮完成後下載打開就可以是用的。

『叄』 html中，圖片太大了怎麼辦

很多種方式來解決：
1、你可以固定一下圖片的大小如：<img src="圖片地址" width="圖片寬度" height="圖片高度" />

2、你可以設置一個div區域，如width:50px; height:50px；這樣你把img放入div區域中，哪怕你設置的img為100%，那他也不會超出這個div區域的；

如果還不懂，繼續追問我

『肆』 上傳圖片時文件過大怎麼辦

可以使用photoshop軟體將圖片的品質調低，就可以將圖片文件大小變小。具體的設置方法如下：

一、打開photoshop軟體界面，點擊左上角的文件選擇打開按鈕。

『伍』 圖片太大無法上傳怎麼辦

你肯定有這樣的經歷，一張特別喜歡的照片正准備發在博客，空間的時候，系統提示你圖片太大無法上傳，這時候該怎麼辦呢?圖片太大無法上傳的解決 方法 其實好簡單，下面由我告訴你!
圖片太大無法上傳的解決方法
畫圖工具，選擇一張你需要修改的圖片，右擊圖片。

02滑鼠懸停在打開方式，點擊畫圖，進入畫圖工具。

03點擊上方的重新調整大小。

04這時你會看到圖片的百分比是100.

05將他們改成50.

06這時候圖片就被縮小了，如果還不夠小，可以繼續調整百分比。

QQ截圖，在桌面上點開需要修改的圖片，然後使用QQ截圖的快捷鍵，Ctrl+Alt A截圖，這時候會出現如圖所示的彩色箭頭，然後拖動彩色箭頭框定范圍截圖，截下的圖片會被縮小。

以上方法完成後的圖片質量會有所下降，如果不是專業用途的圖片沒有大的影響。

『陸』 手機圖片太大怎麼辦

瀏覽器手機圖片太大解決方法：

1、打開瀏覽器，點擊右下角的三個點，然後點擊【設置】按鈕。

這樣就解決了手機圖片太大怎麼辦的問題了。

『柒』 照片太大,無法上傳,怎麼辦

可以用Photoshop把圖片壓縮。

1、電腦打開Photoshop。

『捌』 淺談前端的圖片優化

近期一直在和朋友討論前端性能優化的問題，著重聊到了圖片相關的優化，就想著總結記錄一下。

說到圖片優化主要從兩個點入手，分別是優化體積和合並請求，下面我分別展開說下這兩點。

就優化體積來說，方法還是比較有限，無外乎壓縮圖片大小，根據視圖需要選擇合適的圖片尺寸。

我們知道圖片是有很多格式的，包括jpg、png、gif等，單就大小來說有損壓縮的jpg格式一般是會比無損壓縮的png要小的多的，但是它不支持透明；且單就png來說還區分png8、png24、png32，我們需要根據自身業務使用場景選擇最優的格式，當然如果支持webp的話webp一定是最優解。

選擇尺寸就更好理解了，比如視圖是一個固定400*300的區域，你肯定不需要放一個4000*3000的圖片上去，當然現代的前端項目或多或少都需要考慮不同端的適配，我這邊的處理方式是通過公司私有的圖片伺服器處理，你只需要上傳一張原圖，獲取圖片時根據需要帶長寬參數即可獲得相應大小的圖片。

請求合並是前端優化的必要手段，不止是針對圖片，這里我只列舉針對圖片優化的方案，當然每種方案都有他的弊端。

用雪碧圖來合並多張小圖片的方案已經有很多年了，它成本低兼容好，確實能解決不少問題，但是使用雪碧圖同時會帶來一些副作用需要我們解決。

首先就是內存問題，由於我們把多張圖片合並成一張大圖，所以渲染時每次都會載入整張雪碧圖，這樣對於內存的開銷來說實際上是更大的，解決的辦法就是盡量減少圖片間的留白，以及控制一張雪碧圖的內容不要太多。

還有就是縮放的問題，我們都知道background-size是針對整張圖片的縮放，在移動端適配多尺寸時再使用固定的px定位就會出現偏差，一般這個時候我們都會使用百分比或者rem的方式來處理，不過在部分機型上還是會出現邊緣的情況，一個朋友提出了transform的解決方案，不過筆者目前還沒有驗證。

toDataUrl的方案相比於雪碧圖晚了些，它可以通過base64字元串來描述圖片本身從而減少圖片的請求；它所帶來的問題是會增大體積頁面本身文件大小，而且由於是內聯字元串會導致圖片無法緩存。

最後就是通過iconfont/svg/CSS等方式來模擬圖片展示，這個方案可以算是是最通用的兼容最好的方案，但是也不是絕對的完美方案；就iconfont來說只能是純色的，不能像圖片那樣顏色豐富，而svg和css或多或少都有一些兼容性問題。

我們在優化圖片的時候還可以設置一些緩存策略以及根據業務場景使用一些懶載入的策略，因為這兩條屬於所有請求通用的方案，這里就不展開說了。最後說一句我們在進行前端優化時需要根據自身需要定製優化方案，切不可為了優化而盲目優化。