Оптимизација на сликата за локацијата: сериска обработка користејќи jpegtran | optipng | pngout

  1. Предуслови
  2. Ние користиме препораки за слики
  3. Структура на архива
  4. Кратко упатство за работа
  5. Додатоци
  6. x64 (aka andi)

Мапа без слики - анахронизам. Толку многу луѓе мислат, и тоа не е без здрав разум. Запомнете, колку долго сте биле на страницата за последен пат и колку долго сте биле на неа?

Текстуалните податоци се многу помали од сликата. Но, луѓето се познати дека ги сакаат своите очи. Затоа, сликите ќе бидат несомнена предност на приказната.

Во принцип, зборувајќи за текстот, ние значи и неговата содржина и пригодна визуелна презентација, вклучувајќи ставови, листи, цитати, табели. Сепак, ова не е доволно, па дури и сајтови за новости се обидуваат да обезбедат слики од новинари.

Сепак, ова не е доволно, па дури и сајтови за новости се обидуваат да обезбедат слики од новинари

Да почнеме од претпоставката дека сликите се потребни. Овие можат да бидат фотографии, дијаграми, едноставно објаснување на слики.

Одамна, кога Путин не изгледаше вечно, го направив мојот прв медицински веб портал. Потребно е да се постават слики во атласот. Очигледно е дека е прилично тешко да се замисли анатомската структура на телото без слики, а уште повеќе да се опише со зборови. И без понатамошно адо, јас подигнав слики на bmp (некомпресиран формат). Морам ли да кажам дека тие тежат тесто? Покрај тоа, некои прелистувачи не знаат како да ги прикажуваат сликите.

Па зошто да ги оптимизирате сликите? Едноставен пример е фотографија. Современите телефони имаат камери во 8, 12 и уште повеќе мегапиксели. 12 MP одговара на сликата од 4000 × 3000 пиксели. Во зависност од комплексноста на сцената, ова одговара на големината на 2-5 мегабајти, па дури и повеќе. Десетина фотографии - а големината на страницата многу се зголемува. Сликата се вклопува во областа на содржината, што значи дека прелистувачот мора прво да преземе сè, да го скалира и само тогаш да го прикаже. За слабите процесори или со мала количина RAM меморија - катастрофа.

Сега замислете дека корисникот го гледа местото од телефонот. Во овој случај, вчитувањето на страницата едноставно не може да почека. Значи, сликите треба да бидат претходно намалени.

Некој ќе тврди дека нема смисла во ова, модерен CMS автоматски прави сликички при преземање на слики. Но, дали секој има свои сајтови на VPS или VIP-стапки? Преземањето на една 12-мегапикселна слика може да излезе, но за да се процесира, PHP ќе треба да одвои 35 + мегабајти (во теорија, всушност повеќе) за складирање, а потоа сè уште знае колку да креира помала копија. Евтини тарифи веднаш се фрлам во вишокот на ресурси. Добар хостеер ќе побара од корисникот да не го стори тоа повеќе, лош ќе го игнорира, бидејќи за него се важни само пари, а не извршувањето на услугите.

И така, решивме да дејствуваме правилно. Прелиминарно ги намалуваме сликите, а потоа ги префрламе на страницата. Значи моторот е полесен, и луѓе. Е сè Не, навистина.

Многу уредници ги задржуваат оригиналните делови (мета-информации, не-слики делови од датотеката) кои содржат дополнителни информации. На пример, ако фотографирате нешто на телефон, префрлете ја датотеката на компјутерот, кликнете со десното копче и изберете "Својства → Детали", ќе ги видите податоците на уредот: која камера ја фотографиравте, брзината на блендата, ISO и така натаму. За корисникот, овие информации се бескорисни, па можете да се ослободите од него.

Па, размисли за тоа, еден дел. Што е таму, многу информации кои се содржани? Замислете. Понекогаш добивате слики во кои има стотици килобајти на такви податоци. Само денес, тие испратија логото со големина од 584 КБ за сместување. Во исто време, корисни информации беа само 14 КБ! Што се однесува до мене, не е сосема точно да се натера посетителот да преземе 570 КБ одозгора.

Ајде да ги резимираме сегментите. За да можат корисниците на страницата да прават добро, потребно е:

  1. Намалете ја големината на сликата. За да им помогнете на секој графички уредник.
  2. Отфрлање од делови од датотеки се непотребни. Всушност, на корисникот му треба само слика.
  3. Обидете се да ја намалите големината на сликата.

Првиот став вклучува индивидуална работа на секоја датотека. Тоа е време, но тоа го носи најдобриот резултат. Ние ја отвораме секоја датотека, ја исечуваме, намалуваме, а потоа зачуваме со прифатлив квалитет.

Но, ставовите 2 и 3 може да се дадат на милост и немилост на посебните програми. Софтвер за работа со поставени слики. Google препорачува следниве програми:

  • jpegtran за jpg формат на слика.
  • optipng и pngout за PNG слики.

Малку за стр 3. Графичките уредници обично не се мачат со него. Тие едноставно ја зачувуваат сликата, избираат однапред поставени алгоритми за компресија со исти поставки, квантизациски коефициенти и други работи. Покрај тоа, многу искрено ги пренесуваат достапните мета-информации и додаваат свои, дополнително ја зголемуваат големината на датотеката.

Предуслови

Пред една година, почнаа да разговараат масовно за услугата. PageSpeed ​​Insights од google. Всушност, ова се препораки од пребарувањето гигант за "како да се направи добро". Само внесете ја адресата на страницата и добијте листа на предлози за оптимизација. Таму исто така можете да преземете веќе оптимизирани ресурси, вклучувајќи слики, за вашиот сајт. Точно, ова е релевантно само за проверената страница.

Ако имате веб-сајт, не заборавајте да го погледнете овој член . Особено корисно за оние кои користат WordPress.

Ние користиме препораки за слики

Се чини едноставно: преземете ги програмите специфицирани од Google и ги стартувате сите датотеки на серверот преку нив. Проблемот е што овие комунални услуги се конзола. Тие земаат само 1 датотека одеднаш. Но, ние не сме залудни последна статија зеде време да серија датотеки, нели?

Информации од статијата е сосема доволно за да креирате свој сопствен управувач на датотеки масовно, па нема да насликам каде е тоа. Јас само предлагам да ја преземем подготвена собранието, што јас го користам.

Преземи архива (212 KB)

Структура на архива

Архивата содржи папка [ OptimizeImg ]. За да започнете, неотпакувајте го некаде. Имам тоа се наоѓа во c: \ temp \ но не е важно. Главната работа е дека патеката не содржи извичнички знаци.

Следно. Оваа папка го содржи поддиректориумот [ поставувања ]. Тука треба да ставите датотеки кои бараат обработка. Најдобриот дел е тоа што можете да ја притиснете барем папката / датотечната структура.

Постојат уште 3 програми: jpegtran.exe | optipng.exe | pngout.exe е многу корисна препорака од Google. Преземено од соодветните официјални сајтови / складишта. Ако се сомневате, или само сакате да надградите, преземете од доверлив извор и заменете ги постоечките.

И конечно, срцето на тулца. Батнички:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-опти-до-out.bat
  • 3-out-to-opti.bat

Првата датотека, 1.bat, ја пресоздава структурата од [uploads]. Се креираат 3 дополнителни папки: [jpg_jpegtran] [png_optipng] [png_pngout] со обработени минимизирани датотеки од нивниот тип (jpg-only * .jpg-датотеки, исто со png).

3.бат последователно промовира три сериски датотеки за извршување:

  • 3-go.bat е речиси ист како 1.bat. Прескокнете датотеки jpg / png преку минимизатори. Резултатот од работата ќе биде 3 папки (види погоре) со соодветните слики.
  • 3-opti-to-out.bat создава папка [png_optipng-to-pngout], во која се напишани датотеките обработени од optipng + pngout (токму во оваа секвенца).
  • 3-out-to-opti.bat создава папка [png_pngout-to-optipng] во која се напишани датотеки обработени од pngout + optipng. Слично на претходното, само во различна низа.

Во принцип, само 1.bat е доволно за нашите потреби. 3x кеси се појавија како резултат на истражувања и грешки во претходната верзија на сериската датотека. Така се случило дека за време на грешката датотеките за pngout биле земени од директориумот optipng. И што беше мое изненадување кога лансирањето на старата верзија даде 1,5 пати помала големина отколку во ажурираната серија. Како резултат на тоа, се покажа дека двојната обработка може да "фати" слики добро. Но, тоа трае речиси 2 пати повеќе време. Затоа одлучете сами дали е потребно.

Кратко упатство за работа

  1. Преземи архива .
  2. Распакувајте го.
  3. Одете во новоотворената папка [OptimizeImg].
  4. Сите датотеки што имаат потреба, копирајте ја папката [upload].
  5. Стартувај 1.bat и почекај. Ако има многу датотеки и тие се png, почекајте долго време.
  6. Кога се појавува порака во црниот прозорец за потребата да притиснете копче за да продолжите, сè е подготвено. Останува да се преземе содржината на креираните папки и да се копира на хостинг преку FTP, пребрише стари датотеки.

За пример. Дозволете да имате блог на WordPress. Сите слики се зачувани во [ / wp-content / uploads / ]. Одете во папката за сајтови (преку ftp), одете на [ wp-content ] и едноставно копирајте [ uploads ] во папката OptimizeImg со исто име. Стартувај 1.bat и почекај. По завршувањето на работата, содржината [jpg_jpegtran] (одиме таму!) Е поставена на серверот. Барањата за постоечките датотеки се одговараат со презапишување. Сличен трик за png, но прво гледаме која папка - [png_optipng] или [png_pngout] - зафаќа помалку простор, да ја пополни со неговата содржина.

Не плашете се да ги оштетите другите датотеки. Batniki работат само со jpg / png, а само сликите од овие типови се запишани во новосоздадените папки.

Се надевам дека некој ќе биде корисен. Успеси!

Додатоци

  1. Патеката до [OptimizeImg] не треба да содржи извичник ! и проценти %
  2. Стартувај скрипти како администратор не е потребно. Освен тоа, во овој случај, можеби нема да работат!
  3. ...

Издавач

не е онлајн 13 часа

x64 (aka andi)

Коментари: 2846 Публикации: 395 Регистрација: 02-04-2009

Запомнете, колку долго сте биле на страницата за последен пат и колку долго сте биле на неа?
Морам ли да кажам дека тие тежат тесто?
Па зошто да ги оптимизирате сликите?
Но, дали секој има свои сајтови на VPS или VIP-стапки?
Што е таму, многу информации кои се содржани?