Оптимизация на изображението за сайта: пакетна обработка с помощта на jpegtran | optipng | pngout

1. предпоставки
2. Ние използваме препоръки за изображения
3. Структура на архива
4. Кратки инструкции за работа
5. добавки
6. x64

Сайт без изображения - анахронизъм. Толкова много хора си мислят и не са лишени от здрав разум. Помнете, колко дълго сте били на мястото за последен път и колко дълго сте били на него?

Текстовите данни са много по-малки от изображението. Но е известно, че хората обичат очите си. Следователно снимките ще бъдат несъмнено предимство на историята.

Като цяло, като говорим за текста, имаме предвид както неговото съдържание, така и удобно визуално представяне, включително параграфи, списъци, цитати, таблици. Това обаче не е достатъчно и дори новинарските сайтове се опитват да предоставят образи на журналисти.

Да започнем с предположението, че изображенията са необходими. Това могат да бъдат снимки, диаграми, просто обяснение на картини.

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

Така че защо да оптимизирате изображенията? Един прост пример е снимка. Съвременните телефони имат камери с 8, 12 и дори повече мегапиксела. 12 MP съответства на изображение от 4000 × 3000 пиксела. В зависимост от сложността на сцената, това съответства на размер от 2-5 мегабайта и дори повече. Дузина снимки - и размерът на страницата се увеличава много. Изображението се вписва в съдържателната област, което означава, че браузърът трябва първо да свали всичко, да го мащабира и само след това да го покаже. За слабите процесори или с малко количество RAM - бедствие.

Сега си представете, че потребителят наблюдава сайта от телефона. В този случай зареждането на страницата може просто да не чака. Така че, снимките трябва да бъдат предварително намалени.

Някой ще твърди, че няма смисъл в това, модерната CMS автоматично прави миниатюри при изтегляне на изображения. Но дали всички имат сайтове на VPS или VIP-тарифи? Изтегляне на един 12 MP изображение може да излезе, но за да го обработи, PHP ще трябва да разпредели 35+ мегабайта (на теория, всъщност повече) за съхранение, и след това все още знае колко да създаде по-малко копие. Евтини тарифи веднага се потопите в излишък на ресурси. Добрият домакин ще поиска от потребителя да не прави това вече, лош човек ще го игнорира, защото само парите са важни за него, а не изпълнението на услугите.

И така, решихме да действаме правилно. Предварително намаляваме изображенията и ги качваме на сайта. Така че двигателят е по-лесен и хора. Това е всичко Не наистина.

Много редактори запазват оригиналните парчета (мета-информация, не-образни части от файла), съдържащи допълнителна информация. Например, ако снимате нещо по телефона, прехвърлите файла на компютъра, кликнете върху него с десния бутон и изберете „Свойства → Детайли“, ще видите данните на устройството: коя камера сте заснели, скорост на затвора, ISO и т.н. За потребителя тази информация е безполезна, така че можете да се отървете от нея.

Е, помислете за това, едно парче. Какво има, куп информация, която се съдържа? Представете си. Понякога получавате изображения, в които стотици килобайти от такива данни. Точно днес те изпратиха лого с размер 584 KB, за да се настанят. В същото време полезна информация беше само 14 KB! Що се отнася до мен, не е напълно правилно да принуждава посетителя да изтегли 570 KB от горе.

Да обобщим междинните сборове. За да направите потребителите на сайта добре, трябва:

1. Намалете размера на изображението. За да помогне на всеки графичен редактор.
2. Изхвърлянето на частите на файла не е необходимо. Всъщност, потребителят се нуждае само от картина.
3. Опитайте се да намалите още повече размера на изображението.

Първият параграф включва индивидуална работа по всеки файл. Отнема време, но носи най-добрия резултат. Ние отваряме всеки файл, изрязваме, намаляваме, след това записваме с приемливо качество.

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

• jpegtran за jpg формат на изображението.
• optipng и pngout за PNG изображения.

Малко за стр. 3. Графичните редактори обикновено не се занимават с него. Те просто запазват изображението, като избират предварително зададени алгоритми за компресия със същите настройки, коефициенти на квантуване и други неща. Освен това, мнозина честно предават наличната мета-информация и добавят свои собствени, като допълнително увеличават размера на файла.

предпоставки

Преди година започнаха масово да говорят за услугата. PageSpeed ​​Insights от Google. Всъщност това са препоръки на гиганта за търсене на „как да се справя добре“. Просто напишете адреса на сайта и получите списък с предложения за оптимизация. Там можете да изтеглите и вече оптимизирани ресурси, включително изображения, за вашия сайт. Вярно е, че това се отнася само за проверената страница.

Ако имате уебсайт, не забравяйте да погледнете тази статия , Особено полезно за тези, които използват WordPress.

Ние използваме препоръки за изображения

Изглежда просто: изтеглете посочените от Google програми и стартирайте всички файлове на сървъра чрез тях. Проблемът е, че тези помощни програми са конзолни. Те взимат само по един файл наведнъж. Но ние не сме напразни последната статия отдели време за партидни файлове, нали?

Информацията от статията е напълно достатъчна, за да създадете свой манипулатор на файлове, така че няма да рисувам там, където е. Аз просто предлагам да изтеглите готовия монтаж, който използвам сам.

Изтегляне на архива (212 KB)

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

Архивът съдържа папка [ OptimizeImg ]. За да започнете, разопаковайте го някъде. Разположен съм в c: ep, но няма значение. Основното е, че пътеката не съдържа удивителни знаци.

Напред. Тази папка съдържа поддиректорията [ uploads ]. Тук трябва да поставите файлове, които изискват обработка. Най-добрата част е, че можете да натиснете поне структурата на папката / файла.

Има още 3 програми: jpegtran.exe | optipng.exe | pngout.exe е много полезният, препоръчан от Google. Изтеглено от съответните официални сайтове / хранилища. Ако имате съмнения или просто искате да надстроите, изтеглете от надежден източник и заменете съществуващите.

И накрая, сърцето на тулза. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-Opti-до-out.bat
• 3-на до opti.bat

Първият файл, 1.bat, пресъздава структурата от [качвания]. Създават се 3 допълнителни папки: [jpg_jpegtran] [png_optipng] [png_pngout] с обработени минимизирани файлове от техния тип (jpg - само * .jpg-файлове, същото с png).

3.bat последователно стартира три партидни файла за изпълнение:

• 3-go.bat е почти същата като 1.bat. Прескачане на jpg / png файлове чрез minimizers. Резултатът от работата ще бъде 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] - заема по-малко място, запълнете го със съдържанието му.

Не се страхувайте да повредите други файлове. Батниците работят само с jpg / png и само изображенията от тези типове се записват в новосъздадените папки.

Надявам се, че някой ще бъде полезен. На добър час!

добавки

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

Автори

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

x64

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