鍥剧墖璁﹚eb鎬ц兘鍙樺緱澶嶆潅锛屼篃鍙樺緱鏈夎叮浜嗐€?/p>
鐩镐俊鍒濆鑰呬竴瀹氱湅鍒拌繃杩欐牱鐨勬渚嬶細鈥滃綋浣犲湪HTML涓皢涓€寮?code>500*500鍍忕礌鐨勫浘鍍忕缉灏忥紝灏变細甯︽潵涓嶅繀瑕佺殑涓嬭浇寮€閿€銆傗€?/p>
<img src="xxx" width="100" height="100" alt="xxx" />
鍦ㄨ繖涓緥瀛愪腑锛屼綘璁╂祻瑙堝櫒灏嗗浘鐗囧湪瑙嗚涓婄缉灏忓埌浜?code>100*100锛屼絾娴忚鍣ㄨ繕鏄涓嬭浇閭ｅ紶澶у浘銆備篃灏辨槸璇达紝涓嬭浇鎵€闇€娴侀噺娌℃湁鍙樸€備絾鏇磋鍛界殑鏄紝鏈変簺娴忚鍣ㄥ皢缂╂斁鍥惧儚浣滀负涓€涓€滃崠鐐光€濅絾鍏跺疄骞舵病鏈夋祦琛岀殑杞欢姣斿 ImageMagic 鍋氬緱濂姐€傝繖灏卞鑷翠簡鍥剧墖璐ㄩ噺闄嶄綆鐨勫悓鏃跺澶т簡涓嬭浇閲?鈥斺€?浣嗗鏋滀綘鍦ㄦ湇鍔＄灏辨敼鍙樹簡鍥惧儚鐨勫ぇ灏忥紝骞舵彁渚涗簡涓€涓緝灏忕殑鐗堟湰锛屽氨鍙互鏄庢樉鑺傜渷娴侀噺銆?/p>
涓婇潰渚嬪瓙涓綘鍙兘鍙戠幇浜嗕竴鐐癸細鏄殑锛屽浘鐗囩殑鍔犺浇瀹為檯鏄竴娆?get 璇锋眰锛屽鏋滀笉瀵瑰浘鍍忚繘琛屼紭鍖栵紝灏辩浉褰撲簬閫氳繃缃戠粶鍙戦€佷簡涓€浜涘鐢ㄦ埛浣撻獙娌℃湁浠讳綍甯姪鐨勯澶栨暟鎹€?/p>
瀵瑰浘鐗囩殑浼樺寲鍦╳eb涓張璁稿鎵嬫锛屾湰鏂囧皢浼氳皥璋堝浘鐗囨湰韬紝鍗冲帇缂╁拰鍥剧墖鏍煎紡涓ゆ柟闈€?/p>
鍥剧墖鏍煎紡鍜屼娇鐢?/h2>
鏇翠弗鏍兼潵璇达紝鎴戜滑鎺ヤ笅鏉ヨ璁虹殑宸茬粡涓嶅崟鍗曟槸鈥滃浘鐗団€濊寖鐣翠簡锛屾垜浠彲浠ョО涔嬩负鈥滃浘鍍忊€濄€?br> 棣栧厛瑕佹槑纭殑鏄細浼樺寲鏂规硶鍙栧喅浜庡浘鍍忕殑鍩烘湰绫诲瀷銆?/p>
鍦ㄦ父鎴忓紑鍙戜腑澶ф斁鍏夊僵鐨凙STC绾圭悊鍘嬬缉鏍煎紡鍜岀煝閲忓浘鏍噑vg绛夋殏涓斾笉璁猴紝鍓嶈€呭お杩囧鏉傦紝寮€鍙戝拰鏀剁泭涓嶅绛夈€傜洰鍓峸eb涓父瑙佺殑锛屼篃鍙互璇存槸涓绘祦鐨勬牸寮忔湁 JPG銆丳NG銆丟IF 浠ュ強鍚庤捣涔嬬 JPEG銆傚叾涓牴鎹墍鍖呭惈鑹插僵鏁伴噺鍜岀嚎鏉″張琚垎涓轰袱澶х被锛?/p>
- 鍥惧舰锛氭瘮濡?Logo銆佸浘琛ㄣ€佸浘鏍囩瓑銆傞鑹叉暟閲忚緝灏戙€佹嫢鏈夎繛缁殑绾挎潯鎴栧叾瀹冨皷閿愮殑棰滆壊鍒嗗壊锛?/li>
- 鐓х墖锛氭嫢鏈夎秴澶ф暟閲忕骇棰滆壊锛屽苟涓斿寘鍚钩婊戠殑棰滆壊杩囨浮鍜屾笎鍙橈紱
浣犲彲鑳介毦浠ユ兂璞＄殑鏄紝灏卞浘鐗囨牸寮忚€岃█锛孏IF 閫氬父鐢ㄦ潵鏄剧ず銆屽浘褰€嶏紝鑰?JPEG 鏇撮€傚悎銆岀収鐗囥€嶃€侾NG 鍒欎袱鑰呯殕鍙€備簨瀹炰笂锛孏IF 閫氬父琚緢澶氫汉蹇借锛屼絾鍗存嫢鏈夊己澶х殑鎬ц兘锛岀洰鍓嶆祦琛岀殑 PNG8 鏍煎紡閮戒笌鍏舵瀬鍏剁浉浼笺€?/p>
GIF
閲囩敤8浣嶅帇缂╃殑GIF鏈€澶氬彧鑳藉鐞?56绉嶉鑹层€傛敮鎸佸姩鐢伙紝杩欐槸瀹冨己澶х殑涓€鐐癸紝涔熸槸鏃╄捣琚互鐢ㄥ鑷寸幇鍦ㄥ緢澶氫汉鍙嶆劅鐨勪竴鐐癸紙绗旇€呮浘鍚汉璇村畞鎰跨敤CSS鍋氬姩鐢讳篃涓嶆効鐢╣if锛夈€傚敖绠″湪鍏惰鑼冧腑琛ㄦ槑浜嗏€滆繖涓浘褰氦鎹㈡牸寮忎笉鏄鎴愪负涓€涓姩鐢诲钩鍙?..鈥?/p>
涓€鐩翠互鏉ョ瑪鑰呭 GIF 鐨勬劅鍙楅兘鏄€滃揩鈥濆拰鈥滃皬鈥濄€傝€孏IF鐨勭壒鐐瑰嵈涓嶅彧鏈夎繖淇╋細
- 閫忔槑
- 鏃犳崯
- 鏀寔闅旇鎵弿
闅旇鎵弿涓庨€愯鎵弿
鏈変汉鍙兘閬囧埌杩囪繖鏍风殑闂锛氫负浠€涔堝乏杈圭殑鍥惧拰鍙宠竟鐨勫浘澶у皬涓嶄竴鑷达紵
[鍥剧墖涓婁紶澶辫触...(image-ca23ef-1648523056570)]
杩欐槸鍥犱负鍥剧墖鏄€滈€愯鎵弿鈥濈殑锛氭瘮濡傚湪鐢熸垚 GIF 鏍煎紡鏂囦欢鏃讹紝浼氫娇鐢ㄤ竴涓帇缂╃畻娉曪紙GIF涓娇鐢ㄧ殑鏄?strong>LZW鏃犳崯鍘嬬缉绠楁硶锛夋潵鍑忓皬鏂囦欢鐨勫ぇ灏忋€傚綋鍘嬬缉鏃讹紝浼氫粠涓婂埌涓嬩竴琛屼竴琛屽湴瀵瑰儚绱犺繘琛屾壂鎻忋€傝繖绉嶆儏鍐典笅锛屽綋鍥惧儚鍦ㄦ按骞虫柟鍚戞湁寰堝閲嶅棰滆壊鏃讹紝鍙互鑾峰緱鏇村ソ鐨勫帇缂╂晥鏋溿€?br>
姣斿锛屾湁涓€涓?code>500*100鍍忕礌鐨勫浘鍍?瀹? 500px楂?100px)锛屽浘鍍忎笂鍖呭惈涓€浜涙潯绾癸紝灏辨槸璇存按骞虫柟鍚戞槸鐢辩浉鍚岄鑹茬嚎鏉＄粍鎴愮殑锛屽皢杩欎釜鍥惧儚鏃嬭浆90掳鍚?瀹? 100px楂? 500px)锛屽叾鍨傜洿鏂瑰悜鏄敱鐩稿悓棰滆壊鐨勬潯绾圭粍鎴愮殑锛屾鏃跺悗鑰呯殑鏂囦欢瑕佸ぇ浜庡墠鑰呫€?/p>
鈥滀粠涓婂埌涓嬫壂鎻忊€濆氨鏄€愯鎵弿鐨勫姡鍔夸箣涓€銆傜浉姣斾箣涓嬮殧琛屾壂鎻忓嵈鑳藉浠ゅ浘鐗囧湪娴忚鍣ㄤ腑鏇村揩鐨勫姞杞藉拰鏄剧ず銆傛鐗规€у浜庨偅浜涙參缃戦€熺殑娴忚鑰呮潵璇村挨鍏跺疄鐢ㄣ€?/p>
PNG
鐩墠浣跨敤鐨?PNG 鏍煎紡鍩烘湰涓婂彲浠ュ垎涓轰袱绉嶏細璋冭壊鏉?PNG 锛堜篃灏辨槸涓婇潰璇寸殑PNG8 锛侊級鍜岀湡褰╄壊 PNG銆?/p>
PNG8鏄寚鈥?浣峆NG鍥剧墖鈥濓細鍍忕礌棰滆壊涓嶈兘瓒呰繃256绉嶏紝瀹冩敮鎸乤lpha閫忔槑鑳屾櫙銆傞櫎浜嗗帇缂╃畻娉曚笉鍚屼箣澶栵紝姝?浣峆NG鏍煎紡涓嶨IF鏍煎紡鏋佸叾鐩镐技锛?br> 瀵规瘮 GIF锛孭NG8浣跨敤浜嗘瘮LZW鏇翠紭绉€鐨勫帇缂╃畻娉?鈥斺€?LZ77绠楁硶锛堝綋鐒朵篃鏈夋í鍚戞潯绾圭殑闂锛夛紝鑰屼笖鏀寔alpha闈炲叏閫忔槑鏁堟灉銆傛墍浠ュ湪鏃ュ父浣跨敤涓簲璇ュ敖鍙兘鐢╬ng8浠ｆ浛gif锛?/p>
闄ら潪鍦ㄤ竴浜涢鑹叉暟閲忔瀬灏戠殑闈炲父灏忕殑鍥惧儚涓€傝繖鏃跺€檊if鐨勫帇缂╃巼鏇撮珮涓€浜?..浣嗘槸杩欑鎯呭喌涓嬪鏋滃皬鍥惧儚鏁伴噺瓒呰繃1涓垯搴旇浣跨敤Sprite涓紝浠庤€屽噺灏慼ttp璇锋眰寮€閿€銆?/p>
瀵圭湡褰╄壊PNG锛屼篃鏈夊埆绉板彨鈥淧NG24鈥濓紙涓嶅寘鎷琣lpha閫氶亾锛夊拰鈥淧NG32鈥濓紙鍖呮嫭alpha閫氶亾锛?鈥斺€?鎷?4浣峆NG鏉ヨ锛屽畠鏀寔160涓囩涓嶅悓鐨勫儚绱犻鑹蹭笖鏀寔Alpha閫忔槑鏁堟灉锛岃繖灏辨剰鍛崇潃锛屾棤璁洪€忔槑搴﹁缃负澶氬皯锛孭NG鍥剧墖鍧囪兘澶熶笌鑳屾櫙寰堝ソ鐨勮瀺鍚堝湪涓€璧枫€?br> 鏇炬湁浜烘彁璁彲浠ョ敤鏉ュ湪浣跨敤涓唬鏇縥peg銆備絾鏄?png24 涓€鑸潵璇村ぇ灏忔槸 jpeg 鐨?鍊嶈繕澶氾紝闄ら潪鍦ㄩ渶瑕佽拷姹傛樉绀烘晥鏋滅殑鍦烘櫙涓紝涓嶇劧澶у彲涓嶅繀濡傛銆?/p>
鍙互浣跨敤Adobe Fireworks杞欢鐢熸垚 PNG8 銆傚鏋滀綘鏈変竴寮犵湡褰╄壊 PNG锛屼篃鍙互浣跨敤鍛戒护琛屽伐鍏?code>pngquant 灏嗗叾杞寲涓?PNG8锛?/p>
瀵逛簡锛宲ng涔熸敮鎸佲€滈殧琛屾壂鎻忊€濄€備笉杩囨敮鎸侀殧琛屾壂鎻忕殑png鏂囦欢鍦ㄦ枃浠跺ぇ灏忎笂瑕佺◢澶т竴浜涖€?/p>
鍏充簬PNG鐨勫帇缂╋紝鎯冲璇翠竴鐐?/h4>
PNG鐨勫帇缂╁垎涓轰袱涓樁娈碉紝棰勮В鏋愬拰鍘嬬缉銆?br> 鍏朵腑鈥滈瑙ｆ瀽鈥濇寚鈥滅敤宸垎缂栫爜锛圖elta encoding锛夐澶勭悊鍥剧墖鍍忕礌鐐逛腑姣忔潯閫氶亾鐨勫€尖€濄€備絾杩欎笉鏄湰鏂囩殑閲嶇偣銆?br> 鑰屽帇缂╅樁娈靛氨鏄皢棰勫鐞嗛樁娈靛緱鍒扮殑缁撴灉杩涜Deflate鍘嬬缉锛屽畠鐢?鍝堝か鏇肩紪鐮?鍜?LZ77鍘嬬缉鍏卞悓鏋勬垚锛?/p>
LZ77鏄竴涓熀浜庡瓧鍏哥殑绠楁硶锛屽畠浣跨敤鍓嶅悜缂撳啿鍖哄拰涓€涓粦鍔ㄧ獥鍙ｅ疄鐜般€傚墠鍚戠紦鍐插尯鏄笌鍔ㄦ€佺獥鍙ｇ浉瀵瑰簲鐨勶紝瀹冭鐢ㄦ潵瀛樻斁杈撳叆娴佺殑鍓峮涓瓧鑺傘€傚父鐢ㄦ粦鍔ㄧ獥鍙?KB锛屽墠鍚戠紦鍐插尯32B銆?br> 绠楁硶涓昏鎬濇兂灏辨槸鍦ㄥ墠鍚戠紦鍐插尯涓笉鏂鎵捐兘澶熶笌瀛楀吀涓煭璇尮閰嶇殑鏈€闀跨煭璇€傚鏋滃尮閰嶇殑鏁版嵁闀垮害澶т簬鏈€灏忓尮閰嶉暱搴︼紝閭ｄ箞灏辫緭鍑轰竴瀵?code>銆堥暱搴︼紝璺濈婊戝姩绐椾腑瀵瑰簲鐨勪綅缃€?/code>鏁扮粍銆傞暱搴︽槸鍖归厤鐨勬暟鎹暱搴︼紝鑰岃窛绂昏鏄庝簡鍦ㄨ緭鍏ユ祦涓悜鍚庡灏戝瓧鑺傝繖涓尮閰嶆暟鎹彲浠ヨ鎵惧埌锛?/p>
int lz77_compress(const unsigned char *original, unsigned char **compressed, int size)
{
unsigned char window[LZ77_WINDOW_SIZE], buffer[LZ77_BUFFER_SIZE], *comp, *temp, next;
int offset, length, remaining, hsize, ipos, opos, tpos, I;
int token, tbits;
//鍒濆鍖?
*compressed = NULL;
memset(window, 0, LZ77_WINDOW_SIZE);
memset(buffer, 0, LZ77_BUFFER_SIZE);
//鍚戝ご淇℃伅涓啓鍏ユ簮鏁版嵁瀛楄妭鏁?
hsize = sizeof(int);
comp = (unsigned char *)malloc(hsize);
memcpy(comp, &size, sizeof(int));
ipos = 0;//ipos鎸囧悜婧愭暟鎹腑姝ｅ湪澶勭悊鐨勫瓧鑺?
//浠庢簮鏁版嵁涓彇鏁版嵁鍒扮紦鍐插尯涓?
for(i = 0; i < LZ77_BUFFER_SIZE && ipos < size; I++)
{
buffer[i] = original[ipos];
ipos++;
}
opos = hsize * 8;//opos鏄帇缂╂暟鎹産it鐨勪綅缃?
remaining = size;
while(remaining > 0)
{
//鏍囪 = type + offset锛堝湪window涓級 + length + next
//next灏辨槸涓嶅尮閰嶇殑瀛楃
//tbit琛ㄧず鐢熸垚鏍囪闀垮害
if((length = compare_win(window, buffer, &offset, &next)) != 0)
{
//鑳芥壘鍒皌ype涓?
token = 0x0000_0001 << (LZ77_PHRASE_BITS - 1);
token = token | (offset << LZ77_PHRASE_BITS - LZ77_TYPE_BITS - LZ77_WINOFF_BITS);
token = token | (length << LZ77_PHRASE_BITS - LZ77_TYPE_BITS - LZ77_WINOFF_BITS - LZ77_BUFLEN_BITS);
token = token | next;
tbits = LZ77_PHRASE_BITS;
}
else
{
//娌℃壘鍒?锛屾爣璁板氨鏄師绗﹀彿
token = 0x0000_0000;
token = token | next;
tbits = LZ77_SYMBOL_BITS;
}
//s鏁版嵁澶勭悊涓哄ぇ绔ā寮?
token = htonl(token);
//寰€鍘嬬缉鍖哄～鏁版嵁
for(i = 0; i < tbits; I++)
{
if(opos % 8 == 0)
{
temp = (unsigned char *)realloc(comp, (opos / 8) + 1);
comp = temp;
}
//鏍规嵁闀垮害tbits鍙栦竴浣嶄竴浣嶅帇缂?
tpos = (sizeof(unsigned long) * 8) - tbits + I;
bit_set(comp, opos, bit_get((unsigned char *)&token, tpos));
}
length++;//length鏄尮閰嶆暟鎹瓧鑺傞暱搴?
//宸︾Щ鏇存柊window鎶奲uffer涓互缂栫爜鐨勫瓧绗︾Щ鍒皐indow
memmove(&window[0], &window[length], LZ77_WINDOW_SIZE - length);
memmove(&window[LZ77_WINDOW_SIZE - length], &buffer[0], length);
//鏇存柊buffer涓唴瀹癸紝鍋氱Щ闄ゅ凡缁忕紪鐮佺殑瀛楃锛屼粠婧愭暟鎹腑璋冨叆鏂板瓧绗?
memmove(&buffer[0], &buffer[length], LZ77_BUFFER_SIZE - length);
for(i = LZ77_BUFFER_SIZE - length; (i < LZ77_BUFFER_SIZE) &&(ipos < size); I++)
{
buffer[i] = original[ipos];
ipos++;
}
remaining = remaining - length;
}
*compressed = comp;
return ((opos - 1) / 8) + 1锛?
}
JPEG
JPEG 鏄竴绉嶆湁鎹熺殑鍥惧儚鏍煎紡銆備竴鏃︾紪杈戯紝鍗充娇璁剧疆浜?00鐨勮川閲忎篃浼氭湁涓€瀹氱殑鎹熻€椼€傚彧鏈夊湪涓嬮潰鍑犱釜鎿嶄綔涓槸鏃犳崯鐨勶細
- 鏃嬭浆锛堜笖鍙湁鍦?0掳銆?80掳 鍜?270掳 鎯呭喌涓嬶級
- 瑁佸壀
- 缈昏浆锛堜笖姘村钩鎴栧瀭鐩达級
- 鍦ㄦ爣鍑嗘ā寮忓拰娓愯繘妯″紡闂村垏鎹?/li>
- 缂栬緫鍥惧儚鍏冩暟鎹紙浼樺寲 JPEG 鏍煎紡鍥惧儚鐨勯噸瑕佹墜娈典箣涓€锛?/li>
闇€瑕佹敞鎰忕殑鏄紝鍙湁鍦ㄣ€屾笎杩涙ā寮忋€嶆椂 JPEG 鏍煎紡鍥惧儚鎵嶆敮鎸侀殧琛屾壂鎻忥紝鑰屼笖 IE 骞朵笉浼氬拰鍏跺畠娴忚鍣ㄤ竴鏍烽€愭鍦版覆鏌撴笎杩?JPEG 鍥惧儚銆傘€傘€?/p>
娓愯繘寮廕PEG
浣犲彲浠ョ悊瑙ｄ负鈥滃娆℃壂鎻忊€濓紙鎵弿椤哄簭鏄瓨鍌ㄥ湪JPEG鏂囦欢涓殑锛夛細鎵撳紑鏂囦欢杩囩▼涓紝浼氬厛鏄剧ず鏁翠釜鍥剧墖鐨勬ā绯婅疆寤擄紝闅忕潃鎵弿娆℃暟鐨勫鍔狅紝鍥剧墖鍙樺緱瓒婃潵瓒婃竻鏅?鈥斺€?br> [鍥剧墖涓婁紶澶辫触...(image-9aa138-1648523056571)]
鐩墠寰堝鎶€鏈墜娈甸兘鍙互鍘绘ā鎷熴€屾笎杩涘紡jpeg銆嶇殑鍔犺浇杩囩▼銆傛瘮濡倂ue涓氨鍙互鐢ㄥ埌progressive-image搴擄細
import Vue from 'vue'
import progressive from 'progressive-image/dist/vue'
import 'progressive-image/dist/index.css'
Vue.use(progressive, {
removePreview: true,
scale: true
})
<img class="preview" v-progressive="瀹為檯鍦板潃" :src="棰勮鍥? />
webp锛佹柊鏃朵唬鐨勬妷鎷?/h3>
鐢盙oogle寮€鍙戠殑webp鏍煎紡锛岄泦鏃犳崯銆佹湁鎹燂紙鍚屾椂鏀寔鏃犳崯鍜屾湁鎹熷帇缂╋級銆佽冻澶熷皬銆佽川閲忛珮绛夌壒鎬т簬涓€韬€傛鏃犵枒闂槸鎻愬崌璁块棶浣撻獙鐨勨€滃疇鍎库€濄€?br> but锛屽吋瀹规€ц嚦浠婁粛鐒舵槸鍏剁‖浼ゃ€傛墍浠ワ紝浣跨敤鏃跺繀鐒惰€冭檻鈥滈檷绾р€?鈥斺€?姣斿鍦ㄩ樋閲屼簯OSS涓厤缃檷绾т唬鐮併€?/p>
鍥惧儚鍘嬬缉
PNG
PNG 涔熸敮鎸佹棤鎹熷帇缂┿€侾NG 鏍煎紡灏嗗浘鍍忎俊鎭繚瀛樺湪鈥滃潡鈥濅腑銆傝繖绉嶆柟寮忓緢鍒╀簬鎵╁睍锛屽洜涓轰綘鍙互娣诲姞涓€浜涜嚜瀹氫箟鐨勫潡瀹炵幇棰濆鍔熻兘锛岃€屼笖涓嶈瘑鍒繖浜涘潡鐨勭▼搴忎細鑷姩蹇界暐杩欎簺鍐呭銆備絾瀵逛簬Web鏄剧ず鏉ヨ,澶ч儴鍒嗙殑鍧楅兘骞堕潪蹇呰,鎴戜滑鍙互瀹夊叏鍦板皢瀹冧滑鍒犻櫎銆傝繕鏈変竴鐐瑰ソ澶勶紝褰撴垜浠皢鍙仛gamma鐨勫潡鍒犻櫎鍚庯紝瀹為檯涓婁細鎻愬崌璺ㄦ祻瑙堝櫒鐨勬樉绀烘晥鏋滐紝鍥犱负鍚勪釜娴忚鍣ㄥgamma鐭鏈夌潃杩ョ劧涓嶅悓鐨勬敮鎸侊紒
绗旇€呭湪瀹炶返涓潪甯稿枩娆㈢敤 pngcrush 鍜?optIPNG 涓や釜宸ュ叿銆?/p>
鍏朵腑锛宲ngcrush 鐨勫熀鏈懡浠ゅ涓嬶細
pngcrush -rem alla -brute -reduce src.png dest.png
鏀寔鐨勫弬鏁版湁:
-
-rem alla锛氬垹闄ゆ墍鏈夌殑鍧楋紝浣嗕繚鐣欐帶鍒堕€忔槑鐨刟lpha鍧椼€?/li> -
-brute锛氫娇鐢ㄨ秴杩?00绉嶄笉鍚岀殑鏂规硶杩涜鍘嬬缉锛岄粯璁ゅ€兼槸10绉嶃€傚姞浜嗚繖涓弬鏁颁互鍚庝細鎱㈠緢澶氾紝鑰屼笖澶ч儴鍒嗘儏鍐典笅鏀硅繘鐨勬晥鏋滃緢灏忋€備絾鏄鏋滀綘鏄绾胯繘琛岃繖涓搷浣?瀹屽叏鍙互涓鸿繖涓搷浣滃浠樺嚭1~2绉掔殑鏃堕棿锛屽洜涓鸿繖涓搷浣滃彲浠ユ壘鍒版晥鏋滄洿濂界殑鏂规硶鏉ュ帇缂╁浘鍍忋€備絾濡傛灉浣跨敤鐨勫満鏅鎬ц兘瑕佹眰寰堥珮锛屽氨涓嶈浣跨敤杩欎釜鍙傛暟浜嗐€?/li> -
- reduce锛氬鏈夊彲鑳斤紝灏濊瘯鍑忓皯璋冭壊鏉夸腑鐨勯鑹叉暟閲忋€?/li> -
src. Png锛氭簮鍥剧墖銆?/li> -
dest. Png锛氱洰鏍?浼樺寲鍚庣殑)鍥剧墖銆?/li>
瀹冩槸鍦∕SDOS绐楀彛涓竴涓懡浠よ銆佹垨浠嶶NIX鎴朙INUX鍛戒护琛屼腑杩愯鐨勩€?/p>
鑰?optipng 鏄竴涓法骞冲彴鍛戒护琛屽伐鍏凤紝浣跨敤璧锋潵瑕佹洿鍔犵畝鍗曘€傛嬁鎴戝徃涔嬪墠绉掓潃娲诲姩鍒嗕韩娴锋姤鏉ヨ 鈥斺€?br> 涓嬭浇鍚庯細
yum install optipng # centos
apt-get install optipng # Ubuntu
鍘嬬缉鍓?br> [鍥剧墖涓婁紶澶辫触...(image-7ba2e8-1648523056571)]
鎵ц鍛戒护锛?/p>
find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve
[鍥剧墖涓婁紶澶辫触...(image-63c7a9-1648523056571)]
鍙互鐪嬪埌锛岀‖鐢熺敓灏戜簡涓€鍗婄殑澶у皬锛?/p>
JPEG
JPEG鏂囦欢涓寘鍚涓嬬殑鍏冩暟鎹?
- 娉ㄩ噴銆?/li>
- 搴旂敤绋嬪簭瀹氫箟鐨勫唴閮ㄤ俊鎭? 姣斿Photoshop)銆?/li>
- EXIF淇℃伅锛屾瘮濡傛媿鎽勭敤鐨勭浉鏈哄瀷鍙枫€佹媿鎽勬棩鏈熴€佹媿鎽勪綅缃€佺缉鐣ュ浘绛夛紝鐢氳嚦杩樺彲浠ュ寘鍚煶棰戜俊鎭瓑銆?/li>
杩欎簺鍏冩暟鎹笉浼氬奖鍝嶅浘鍍忔樉绀猴紝鍙互琚畨鍏ㄥ湴绉婚櫎銆傚鍏冩暟鎹殑澶勭悊锛屽噾宸т篃鏄垜浠箣鍓嶆彁鍒扮殑瀵笿PEG杩涜鏃犳崯鍘嬬缉鐨勬柟娉曚箣涓€锛屽彲浠ュ皢鏂囦欢涓偅浜涗笉闇€瑕佺殑閮ㄥ垎鐩存帴鍓旈櫎锛岃€屼笉浼氬奖鍝嶈瑙夎川閲忋€?br> 鍛戒护琛屽伐鍏?jpegtran 鍙互閫氳繃鍛戒护琛屽畬鎴愯繖浜涜浆鎹㈠伐浣?
jpegtran -copy none -optimize src.jpg dest.jpg
鍙傛暟濡備笅:
-
-copy none锛氳缃笉鍖呭惈浠讳綍鍏冩暟鎹€備綘杩樺彲浠ヤ娇鐢?--strip-all鍒氬ソ鐩稿弽锛?/li> -
-optimize锛氬己鍒跺闇嶅か鏇艰〃杩涜浼樺寲锛屼粠鑰岃幏寰楁洿楂樼殑鍘嬬缉姣旓紱 -
src. jpg锛氶渶瑕佷紭鍖栫殑鍥惧儚锛?/li> -
dest.jpg锛氫紭鍖栬繃鐨勫浘鍍忥紱
杩欓噷渚濈劧鏀句竴鏉′箣鍓嶇瑪鑰呭湪椤圭洰寮€鍙戣繃绋嬩腑浣跨敤鍒扮殑鍛戒护锛圠inux鐜 - Ubuntu锛夛細
find . -iname '*.jpg' -print0 | xargs -0 jpegoptim --strip-all --preserve --totals --all-progressive
闈欐€丟IF杞琍NG
姝ｅ涓婇潰璇磋繃鐨勶紝鍦ㄥ疄闄呭紑鍙戜腑鍙互灏?gif 杞负 png8 鏍煎紡銆傝繖涓繃绋嬪彲浠ラ€氳繃澶у悕榧庨紟鐨?ImageMagic 鏉ュ畬鎴愩€傦紙濂藉儚澶у鏁版牸寮忎箣闂磋浆鎹㈢殑閮芥槸閫氳繃姝ゅ伐鍏峰疄鐜扮殑锛?/p>
convert source.gif PNG8:destination.png
寰堢畝鏄庯紝娌℃湁浠€涔堝浣欑殑閰嶇疆 鈥斺€?褰撶劧锛屾病鏈変笉浠ｈ〃涓嶈兘鍔犮€?br> 瀹為檯涓婏紝ImageMagic杩樺彲浠ュ疄鐜扳€滃悎鎴恎if鈥濄€佲€滆皟鏁村浘鐗囧ぇ灏忊€濄€佲€滃壀瑁佸浘鐗団€濄€佲€滃帇缂┾€濄€佲€滄护闀溾€濄€佲€滃浘鐗囧彇鍙嶁€濄€佲€滆竟缂樻娴嬧€濈瓑鍔熻兘銆?/p>
闇€瑕佹敞鎰忕殑鏄細濡傛灉寰堝瀛愬懡浠や笉鑳界洿鎺ヤ娇鐢紝鍒欏彲浠ユ妸浠栦滑褰撳仛magick鐨勫瓙鍛戒护浣跨敤锛屾瘮濡傛娴?GIF 涓槸鍚﹀寘鍚姩鐢荤殑
identify bbb.gif
# 濡傛灉涓婇潰鐨勮涓嶉€氾紝鍙互鍦ㄥ墠闈㈠姞涓娾€渕agick鈥濓細
magick identify gif
瀵逛簬鏃犳崯鍘嬬缉鏉ヨ锛屼綘鍙互鍙嶅鎵ц鍚屾牱鐨勫懡浠わ紝浠ュ緱鍒板敖鍙兘浼樼殑缁撴灉锛?/p>
sprite浼樺寲
涓婇潰鎻愬埌浜咰SS Sprite锛屾槸鎸囧皢澶氫釜鑳屾櫙鍥剧墖鍚堝苟鍒颁竴涓緝澶х殑鍥剧墖涓紝閫氳繃淇敼鑳屾櫙鐨勪綅缃紝鍦ㄥ厓绱犱笂鏄剧ず鑳屾櫙鍥剧墖鐨勪竴閮ㄥ垎锛堝皢鍔犺浇鏄剧ず澶氬紶灏忓浘鐗囧彉涓哄姞杞戒竴寮犲ぇ鍥剧墖鏄剧ず涓嶅悓浣嶇疆锛夈€傝繖椤规妧鏈簲璇ユ槸鏈€鍏堣 Yahoo! 閲囩敤锛岄€氳繃鍑忓皯 Yahoo! 棣栭〉涓婂皬鍥炬爣鎵€甯︽潵鐨勮姹傛暟鏉ユ彁鍗囨€ц兘锛?/p>
闅忕潃sprite鎶€鏈殑鈥滄互鐢ㄢ€濓紝鎴戜滑鐜板湪鍏跺疄瓒婃潵瓒婂簲璇ュ叧娉ㄢ€渟prite鏁伴噺鈥濄€佲€滅淮鎶ゆ垚鏈€濆拰鈥滀笉閲嶅椤甸潰鈥濅笁鑰呬箣闂寸殑鎶夋嫨銆傜劧鍚庢湁浜烘彁鍑轰簡鈥滆秴绾prite鈥濆拰鈥滄ā鍧楀寲sprite鈥?鈥斺€?鍏跺疄灏辨槸灏嗏€滅浉浼尖€濈殑灏忓浘鍍忔斁鍦ㄤ竴璧枫€?/p>
姣斿Google鎼滅储鍙湁涓や釜椤甸潰锛屽畠浠氨閫夋嫨浜嗏€滃皢鎵€鏈夐渶瑕佺敤鍒扮殑鍥炬爣鏀惧湪涓€寮爏prite涓€濄€?br> 浣嗗鏋滀綘鐨勭綉绔欐湁寰堝椤甸潰锛屽氨闇€瑕佷竴涓?涓嶅悓鐨凷prite绛栫暐锛屽惁鍒欑淮鎶ゆ垚鏈皢浼氬彉寰楅潪甯搁珮銆傛渶缁堢殑鐩爣搴旇鏄彲浠ュ緢鏂逛究鍦板皢閭ｄ簺涓嶅啀浣跨敤鐨勬ā鍧椾粠缃戠珯鍒犻櫎銆傛湁浜烘浘鎻愬嚭涓€绉嶇湅娉曪細浣犲彲浠ュ皢鍚屽睘浜庝竴绉嶇被鍨嬬殑鍥惧儚鍚堝苟鍦ㄤ竴璧枫€傛瘮濡?/p>
- 鍚屼竴涓渾瑙掓鐨勫洓涓锛?/li>
- 妯″潡澶撮儴婊戝姩闂╙鎵€鐢ㄧ殑宸﹀彸涓よ竟锛?/li>
- 鎸夐挳鐩稿叧鐘舵€侊紙濡傛灉鑳屾櫙鎴栨暣涓寜閽氨鏄竴寮犲浘鐗?鈥斺€?涓嶈繃鐜板湪css瀹屽叏鍙互瀹屾垚杩欎欢浜嬶級锛?/li>
- tab鐩稿叧鐘舵€侊紙褰撳墠銆佹偓娴拰姝ｅ父鏁堟灉锛夛紱
- 鎸夌収棰滆壊鍚堝苟锛堝皢棰滆壊鐩歌繎鐨勫浘鏍囩粍鍚堝湪涓€璧凤級
缁撹锛氫嚎鐐圭偣鎯虫硶
杩戞湡寮€濮嬬爺绌跺浘鍍忕畻娉曟柟闈紝鐞㈢（鎬庝箞灏嗚繖浜涚敤浜庡墠绔骇鍑猴紝姣曠珶灏卞浗鍐呮潵璇达紝涓嶄互鍔犳寔椤圭洰鐨勬妧鏈爺绌舵鏃犳剰涔夛紙闄や簡瑁卋锛夈€傚啀缁撳悎涔嬪墠鍚涓€涓悓瀛︾珶鐒跺湪鍙嶅鐪嬫垜鐨勬枃绔狅紝涓嶇鎰熷徆锛屾瘮鎴戠墰閫肩殑浜鸿繕姣旀垜鏇村姫鍔涖€備簬鏄?..鎴戜篃鍘诲張鐪嬩簡鍑犵瘒涔嬪墠鍐欑殑鏂囩珷馃槒
浜庢槸鍙戠幇锛屼箣鍓嶅叧浜庡浘鐗囩殑鏈変簺鏂囩珷涓嶄粎鐪嬪緟闂澶崟涓€锛岃€屼笖寰堝鏂囩珷涓殑鍥剧墖澶勭悊鏂规硶涓€鐩存病鏈夎娉曪紝灏遍偅鏍风儌鍦ㄩ偅閲屼簡銆傚湪杩欑鑳屾櫙涓嬶紝淇冩垚浜嗚繖绡囨枃绔犵殑浜х敓銆?br>
璇磋捣鏉ヤ负杩欑瘒鏂囩珷鏁寸悊涔嬪墠鐨勬兂娉曞拰涓€浜涒€滃鎬濇€兂鈥濊垂浜嗘垜涓や笁涓繁澶滐紙鐓庣啲鑹箙杩樻槸鍐冲畾涓嶅湪鎽搁奔鐨勬椂鍊欏共杩欎簨锛屾垜鐪熸槸濂藉憳宸ワ紝鍢垮樋锛夛紝缁撴灉鏈€鍚庡彂鐜板緢澶氫笢瑗挎斁鍦ㄨ繖閲屼笂涓嬫枃涓嶅悎閫傘€傚彧濂戒綔缃紒
鏈€鏈€鏈€鍚庯紝鍚愭Ы涓€涓嬶紝ImageMagic瀹樻柟鏂囨。鐪熸槸涓€涓碂绯曠殑鏂囨。銆俹ver~