Актуализирано в неделя, 14 юни 2020 г.

тегло

Подобрете зареждането на изображения на уеб сайтове на WordPress

Наблягам на WordPress, защото именно мениджърът на съдържанието всеки може да се справи, за да създава или редактира съдържание на уебсайт (с минимални знания как да го използва).

Освен това те обикновено са хора, които не обръщат внимание на определени детайли от този тип и се интересуват повече от писането на съдържание от собствен интерес.

Програмите и инструментите, които препоръчвам обаче, са приложими за всеки тип уеб страница. Всъщност програмата, която използвам най-много, е Photoshop, комбинирана с онлайн инструмента TinyPNG.

Банер - WordPress: оптимизирайте теглото на уеб изображението

Забележка 1: По всяко време говорим за изображения в мрежата или дигитален носител, никога за печат.

Индекс

  1. Подробности за снимките: размер, резолюция, тегло
  2. Примери: камера и скорост на предаване на данни
  3. Програми, инструмент, съвети и приставки
    - Програми за редактиране на изображения (Mac/Windows): променете размера
    - Онлайн инструмент: за компресиране (намаляване) на теглото
    - Съвет „AyudaWP“: намалете размера на WordPress
    - WordPress плъгини: за компресиране (намаляване) на теглото на изображенията
  4. Видеоурок
  5. Мнение

Подробности за снимките: размер, резолюция, тегло

Забележка 2: Тази статия е за този потребител, който не разбира значението за мрежата по отношение на фотогалериите.

Размер

960 x 720 пиксела (препоръчително макс.).

Уеб резолюция

72 dpi (според размера на пиксела).

Средно тегло на изображение

Приблизително 150 KB (избягвайте MB), ако е JPG формат (PNG форматът тежи повече, но има по-малко загуба на качество и се използва за прозрачни фолиа и плоски изображения, както и текстове).

Примери: камера и скорост на предаване на данни

Камера

Те обработват в пиксели размер и те са от едно резолюция 72 dpi:
- 12 мегапиксела = 4000 x 3000 пиксела (този размер трябва да бъде намален до 960 x 720 пиксела макс.) С тегло прибл. 4 MB (намалете до приблизително 150 KB)

План за данни

Обикновено за мобилни устройства или таблети те се справят с определени тегло, Изразено в:
- 1GB = 1000MB (най-ниска скорост на предаване на данни).
Други мерки за данни:
- 1 MB = 1000 KB (обърнете внимание на това тегло KB, което ще видим по-долу).
- 1 KB = 1000 B.

Трябва да направим снимките ни по-малки от 1MB. Идеалното би било по-малко от 150 KB, като се вземе предвид размерът, който посочих като пример в тази статия: 960 x 720 px, разделителната способност: 72 dpi и формат: JPG.

Програми, инструмент, съвети и приставки

Редактиране на програми
За да преоразмерите (пиксели), ако е необходимо.

Онлайн инструмент
За допълнително компресиране (намаляване) на теглото и запазване на качеството (JPG, PNG формати).

Съвет „Помощ за WordPress“
Премахнете определени размери по подразбиране, които WordPress установява.

WordPress плъгини
Откроявам 3 типа, които са най-препоръчителни за компресиране (намаляване) на теглото, въпреки че бих бил предпазлив с тях, защото приставките, които създават повече проблеми в WordPress, са фотогалериите и тези за оптимизиране на изображения.

Забележка 3: Добър заместител на приставките за галерия с изображения, това би била родната галерия на WordPress и ако вашата тема няма изскачащи прозорци за представяне на изображенията, има приставка, която има, Responsive Lightbox.

Програми за редактиране на изображения (Mac/Windows): преоразмеряване

За да промените размера (пиксели), ако е необходимо. Безплатни програми .

Визуализация (Mac).

- Променете размерите (размера) на изображението:
Отворете всяка снимка с „Преглед“> Инструменти> Регулиране на размера> Размери на изображението.

Визуализация - Примерни параметри (кликнете за уголемяване)

1-ви. Подходящо за: По избор (пиксели).
2-ри. Ширина: 960/Височина: 720 (пиксели).
3-ти. Разделителна способност (dpi): 72 (пиксели/инч).
4-ти. Мащабирайте пропорционално (да).
5-ти. Примерно изображение (да).
6-то. Да приеме.

- Запазете изображението в JPG (JPEG), PNG или други формати:
Файл> Експортиране> Експортиране като (изберете име)> Папка за запазване (Работен плот)> Форматиране (каквото искате)> Запазване.

Gimp (Mac/Windows/Linux).

- Променете размерите (размера) на изображението:
Отворете всяка снимка с „Gimp“> Image> Scale the image.

Gimp - Примерни параметри

1-ви. Ширина: 720/Височина: 960 (px).
2-ри. Разделителна способност (dpi): 72 (пиксела/инч).
3-ти. Интерполация: кубична.
4-ти. Мащаб (ОК).

- Запазете изображението в JPG (JPEG), PNG или други формати:
Файл> Експортиране като> Име> Запазване в папка: Работен плот> Изберете типа на файла (Разширения: .jpg или .png)> Ако сме избрали PNG, ще получим изскачащ прозорец с поредица от опции (Преплетена марка) > За износ.

Други програми се препоръчват от „Emezeta“ (не знам как протичат) за компресиране (намаляване) на теглото на изображенията.

Онлайн инструмент: за компресиране (намаляване) на теглото

TinyPNG (безплатно)

Уеб корица, онлайн инструмент TinyPNG (позволява формат PNG и JPG)

Използвах „TinyPNG“, който ми даде най-добри резултати. Направете 2 нюанса с JPG и PNG формат.
- PNG: Изберете това за прозрачни фолиа и точкови цветове (лога). Също така, ако съдържа текстове.
- JPG: Изберете това, ако е снимка с хора/пейзажи/животни.

Забележка 4: като любопитство, този онлайн инструмент има приставка за WordPress, която ще видим в края на статията, а също така има приставка за Photoshop (платена: $ 50).

Има и други инструменти, но не ми хареса до такава степен, че този, който наистина има голяма компресия (намаляване), тегло и качествен резултат.

Ще ви дам обаче връзки към 2 други, препоръчани от „social4creative“:
- Webresizer (качване на макс. 10 MB и други подробности).
- Compressor.io (JPEG - PNG - GIF - SVG).

Съвет от „AyudaWP“: Намалете размера на WordPress

Лесен начин да намалите размера на вашия WordPress.

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

Ще намерите 2 или 3 допълнителни изображения, които не винаги използвате.
Необходимо ли е WordPress да създава тези копия?

Избягването е много просто, отидете на:
- WP Desktop> Settings> Media: и задайте размера или размерите, които не искате WordPress да се създава автоматично, на „нула“.

Намалете теглото в WordPress, съвет от 'AyudaWP' (щракнете, за да увеличите)

Персонализирайте размера на изображението

Това, което те не коментират в „AyudaWP“, тъй като статията е от 2013 г., е нова опция, която беше включена. Вярвам, че от версия 4.3 на WordPress.

Сега, ако добавим обект към нашата публикация/страница, например изображение и кликнете върху него (във визуален режим), ще получим 6 икони отгоре или отдолу: ляво подравняване, центрирано, дясно, без подравняване, редактиране, изтриване.

Ако кликнете върху „Редактиране“, ще имаме на разположение „подробности за изображението“. Ако искаме персонализирайте размера, твърде лесно. Отидете на „Настройки на дисплея“> „Размер“: Персонализиран размер (можете първо да въведете стойността, която искате, а другата стойност ще бъде коригирана автоматично).

WordPress плъгини: за компресиране (намаляване) на теглото на изображенията

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

WordPress плъгин: WP Smush

Имате достъп от раздела мултимедия, следвайте стъпките, които те показват, и той ще се погрижи за намаляване на теглото на изображенията, които имате на вашия сървър.

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

В допълнение, всички нови изображения, които качвате във вашите статии, самата програма ще ги оптимизира.
- Източник на информация: „social4creative“

WordPress приставка: EWWW Image Optimizer

Полезен и лек плъгин, той се използва както в изображения, хоствани в библиотеката на WordPress, така и в хостове на CDN.

Регистрирайте изображения, които вече са оптимизирани, за да не се налага да повтаряте оптимизацията всеки път, когато се използва тази приставка.
- Източник на информация: „social4creative“

WordPress плъгин: Компресиране на JPEG и PNG изображения - TinyPNG

Изкуших се да инсталирам този плъгин, за да видя толкова добри резултати от неговия онлайн инструмент, но този текст спря краката ми (въпреки че е единственият, който очакваше актуализацията до версия 4.4 на WordPress и техническата му поддръжка във форумите е много добра).

Инсталирайте тази приставка и вземете безплатния си API ключ от този адрес. С безплатен акаунт можете да компресирате повече или по-малко 100 изображения на месец (въз основа на нормална инсталация на WordPress). Точният брой зависи от това колко миниатюрни размера използвате. ".

„Можете да промените всеки миниатюрен размер, генериран веднъж компресиран, тъй като всеки от тях се брои за една компресия. И ако сте чест потребител, можете да компресирате повече изображения срещу малка допълнителна такса за изображение ".

Видеоурок

  • WordPress: оптимизиране на теглото на уеб изображението
    Ще видим подробности, свързани с размера, разделителната способност и теглото на изображенията, подходящи за уеб страница. Няколко примера, за да разберете по-добре. И поредица от програми, инструменти, съвети и приставки.

Мнение

Мисля, че това е едно от нещата, които всички трябва да научим, за да придобием добри навици и да не разчитаме толкова много на приставки, които улесняват тази задача. Въпреки че разбирам, че има хора, които нямат време да извършат някои процеси, те са посъветвани.

Изходни изображения

Вижте свързания раздел в моя Pinterest.

Am уеб дизайнер с WordPress. Също така използвам графичен дизайн (редактиране на изображения) и реализация на видео (мога да редактирам, но не и да записвам). Помагам ви да откриете/подобрите идентичността на вашата марка, като отличавате уебсайта си. Използвам добре визуалния и емоционален дизайн. На разположение съм да ви дам: обслужване, обучение, консултации.