Днес ще разгледаме изчерпателно работата с изображения в мрежата. Знам, че всичко е написано по тази тема, но ще се опитам да допълня моето виждане и да обобщя различна информация.
Какво да следвате при избора на изображения за мрежата?
1) Авторско право
На първо място, авторските права върху изображенията трябва да бъдат спазени. На практика това означава, че ако нямате свои собствени снимки, трябва да използвате тези от фотобанки. Можете да избирате от платения вариант: можете просто да закупите изображението или да изберете от безплатните фотобанки тези, които също са предназначени за търговска употреба. Това е търговска употреба, когато поставяте изображение в реклама, за да увеличите продажбите. Например използването на едно и също изображение във вашия блог е необичайно.
Безплатни стокови снимки:
Можете да намерите и друг списък с безплатни фотобанки тук: https://jurosko.sk/obrazky-zadarmo/
Платени фотобанки:
За всяко изображение проверете какъв тип лиценз покрива.
2) Размер на снимката
Снимките трябва да бъдат преоразмерени, преди да могат да бъдат добавени в мрежата. Инструкции за това как да преоразмерите снимките след добавянето им в мрежата са по-долу.
Големи изображения в пиксели (пейзажът е достатъчен 2000px, на височина от ок 600px макс) трябва да е макс до 200 - 300kB за един.
Идеално е да имате по-малки снимки до 100kB и в размер на ок 1000x1000px макс.
Не забравяйте да нямате снимки на уебсайта, които имат 1 MB и още. Големите изображения също ще забавят зареждането на уебсайта, бъдете внимателни, особено при мобилните телефони.
Препоръчвам да поставите снимки в слайдшоу (движещи се снимки, които се променят, обикновено се използват на началната страница/ротатор на изображения) със същия размер, определено високи и идеално широки. Ако слайдшоуто не е настроено на различни опции, вероятно няма да скочите високо. Това създава нежелан ефект, когато мрежата „скача“ нагоре и надолу според височината на изображенията.
Препоръчително е също да използвате подобни цветни изображения в едно слайдшоу, които са едновременно хармонизирани с мрежата. Многоцветни изображения, докато едното ще бъде тъмно, другото светло и други подобни не създава ефект на целостта на страницата, така че е добре да помислите за това.
Тип: Ако качвате няколко версии на изображения в мрежата и ги преоразмерявате по различен начин, добре е да изтриете тези, които не използвате следващия път, от медийната си библиотека, за да избегнете заемането на място. Също така ще бъде по-ясно, когато трябва да намерите нещо там, когато няма нито една статия 10. Плюс това, поне няма да претоварите излишно мястото на хостинга.
Програми за редактиране на изображения
Ако програмата за редактиране на изображения, която използвате, има опцията Save for web, не забравяйте да я запазите в този формат (като Photoshop).
Освен това има по-разширени опции за редактиране на изображения Gimp - https://www.gimp.org/ По същество е подобен на Photoshop и е безплатен.
Поради яснотата на раздела тук не е възможно да се анализират програмите, така че ще покажем само нещо по-опростено и по-практично.
IrfanView
Можете да изтеглите това приложение на: https://www.irfanview.com/
В тази програма можете лесно да редактирате множество изображения в една директория. Това означава, че няма да редактираме ръчно изображенията едно по едно, но ще зададем правилата, така че програмата да го настройва автоматично за всички избрани изображения.
Първо, поставяме изображенията, които искаме да редактираме, в една директория на компютъра и подготвяме нова малка директория там (снимка № 1).
Снимка бр. 1 - Подготовка на директория за изображения.
Отворете всяко изображение, което да се появи в IrfanView, натиснете клавиша Б. - или изберете от менюто Файл - Пакетно преобразуване/Преименуване (снимка № 2).
Снимка бр. 2 - Настройки за пакетно преобразуване.
След това задаваме нещата според картинка №. 3:
Снимка бр. 3 - Индивидуални стъпки на партидно преобразуване.
Точка 1 - ние избираме пакетно преобразуване и преименуване на файлове.
Точка 2 - маркирайте файловете в дадената директория
Точка 3 - щракнете върху Добави Всички, той автоматично ще добави файловете към списъка.
Точка 4 - като щракнем върху бутона Опции, задаваме групови настройки за преименуване и модел на име
Според Фигура 4 задаваме шаблона на $ N_sm, което означава, че намаленият файл се именува с оригиналното си име и се допълва от "_sm". Важно е да запазите оригиналното си име, ако ще остане такова. Разбира се, можете да го наречете друг.
Снимка бр. 4 - Преименуване на изображения.
След това задаваме изходен формат и jpg. Щракнете върху бутона Настроики, можете да промените качеството на полученото изображение като процент (Фигура 5). Можем да оставим 100% в началото, бихме дали по-малко, ако генерира все още големи изображения.
Снимка бр. 5 - Задаване на изходен формат.
Щракнете върху бутона Разширени настройки и изберете метода за намаляване на размерите (Фигура 6). Размерът може да се променя или като процент, или чрез пиксел (см или инчове). За този пример ние преоразмеряваме до максимален размер 900 × 900 px. Можем също така да регулираме стойността на разделителната способност на изображението - dpi. Размерът на DPI от 72 е достатъчен за уебсайта.Накрая потвърждаваме, като щракнем върху бутона OK.
Снимка бр. 6 - Настройки на размера на изображението.
Още веднъж ще проверим пътя до директорията с по-малките снимки. Кликнете върху Използвай точен поглед в директорията - тя ще зареди директорията, в която имаме тези снимки, кликнете върху Преглед и изберете предварително подготвена директория за извеждане на малки изображения (Фигура 3, точка 5).
Като алтернатива можете също да играете с настройките и да поставите отметка в квадратчето на снимка 5 Задаване на размер на файла 65,00 KB (RIOT). Това също ще намали размера на изображенията повече в мрежата. Трябва да тествате колко трябва да се промени, така че изображенията да са достатъчно големи в пиксели и достатъчно малки в kB.
Когато всичко е настроено, ние потвърждаваме целия процес, като кликваме върху бутона Стартиране на партида.
На снимка бр. 7 тогава виждаме, че снимките са около 100kB. По този начин те могат да отидат в мрежата.
Снимка бр. 7 - Преоразмерени изображения.
В заключение искам да подчертая, че размерът на по-голяма страница от около 1000px е достатъчен за обикновени изображения в мрежата. Оставяме размера на приблизително 1900px в ширина за слайдшоута на цялата площ.
Можете също така да направите много прости корекции на вида на изрязване и преоразмеряване в програмата Paint в Windows. Но вече не можете да играете с настройката за качество на dpi и т.н. Но това е достатъчно за няколко снимки.
3) Описване на изображения
Обадете се на снимки в заглавие, алт а описание Веднага щом ги качат в мултимедия в мрежата - това е добре за търсачките по отношение на SEO.
Заглавието е името на изображението, alt е описанието, което роботът вижда, когато става въпрос за мрежата и описанието се показва, когато видите изображението в увеличен прозорец след щракване върху него (това, но зависи и от шаблона или използвана галерия).
В същото време си представете сайта си да чете сляп човек а компютърната му машина чете описанията на изображенията. Какво мислите, че ще знаете какво има на снимката, когато името й е DSC1234.jpg или когато се нарича билки на рецепта.jpg?
Напишете Alt, заглавие и описание като текст, т.е. с ударения. Но имената на снимките в именуване на файлове пиши без диакритика и интервали, използвайте само азбучни знаци, цифри, долни черти или тирета.
Не използвайте едновременно дълги имена (не трябва да е по-дълъг от 30 знака). Възможно е да има проблем с преместването на файлове с дълго име.
Съвет за вас: Somstrasnedlhynazov-obrazku-kterynevie-kedysamaskoncit-acimaestepokracovat-niejeozajuplnefajn-napad.jpg Това не е точно пътят, където води 🙂 И повярвайте ми, наистина съм срещал подобни имена.
Надписите на изображенията трябва да бъдат зададени сега при запис, защото в този случай "по късно"означава"никога".
4) Оптимизирайте изображенията директно в мрежата
Ако вече имате качени изображения в мрежата, можете също да ги оптимизирате с помощта на приставката за компресиране на JPEG и PNG изображения (https://wordpress.org/plugins/tiny-compress-images/)
Трябва обаче да имате акаунт на техния уебсайт (https://tinypng.com) и да го свържете с приставка на вашия уебсайт.
Ако ви притеснява влизането, е възможно да използвате приставката Smush, който работи без влизане. (https://wordpress.org/plugins/resmushit-image-optimizer/)
Изберете само един от предлаганите плъгини. Няма смисъл да имате различни приставки в мрежата за една операция. Отново принципът е, че колкото повече има и колкото по-малко плъгини, толкова по-добре.
Няма да очертаем темата за настройването на тези приставки днес. Вярвам, че постепенно ще обработвам необходимата информация, също въз основа на вашите коментари и забележки, тук или в моята група във Facebook.
5) Размери на изображението - изрязване на миниатюри в wordpress
Различните шаблони имат различен размер на изображението. Той изобщо не е стандартизиран, така че всеки дизайнер и разработчик може да реши какви размери на изображенията да използва в шаблоните. В същото време има 2 начина за изрязването им, единият, при който е трудно да се изреже точния размер, а другият, при който се намалява само според по-голямата страна до желания размер на визуализацията.
Нито един от тези методи обаче не може да даде напълно хубави гледки, каквито биха ни били необходими. Следователно има приставки, които могат да помогнат на потребителя при редактиране на миниатюри.
Един от тях е приставката Изрязване на миниатюри (https://en.wordpress.org/plugins/crop-thumbnails/)
В този плъгин можете да зададете и евентуално ръчно да изрежете отделни типове използвани изображения, ако е необходимо. Не винаги е необходимо да се подрязват всички видове размери. Всичко, което трябва да направите, е да изберете разрез само за размера, който не ви подхожда на страницата.
Снимка бр. 8 - Приставка за изрязване на миниатюри и настройки за изображения директно в wordpress.
Това може да стане директно в статията, като щракнете върху бутона Изрязване Представено изображение. Ако сте в списъка с мултимедия, можете да направите това и за всяко изображение поотделно (Фигура 8). Ще се появи прозорец с избор на кой тип измерение искате да промените (Фигура 9). След като го изберете, ще можете да редактирате измерението вдясно. След това избирате подходящата част от изображението за изрязване. Щракнете, за да потвърдите тази операция Запазване на реколтата и накрая, актуализирайте статията.
Снимка бр. 9 - Приставка за изрязване на миниатюри - изрязване на изображения
За да влезе в сила промяната, е необходимо да се отрази използването на уебсайта Ctrl + F5. В по-сложен случай е необходимо да изчистите кеша с помощта на бутоните Ctrl + Shift + Del и също изчистете кеша.
6) Галерии в wordpress
С галериите е добре да се работи чрез Imagely https://www.imagely.com/ - основната версия е безплатен плъгин на wp https://wordpress.org/plugins/nextgen-gallery. Или не се колебайте да използвате друга приставка за галерия.
Въпросът за изображенията е много широк. Нямахме време да засегнем въпроси като: как да добавяте изображения в редактора, как да добавяте връзка за увеличаване на едно изображение, как да създавате галерии с помощта на мултимедия wordpress или отделно според директориите, например чрез галерията Nextgen плъгин, как да създадете ефект на лайтбокс, ако вашата тема не го поддържа и се отнася само до отделно изображение и т.н. ...
Ще обсъдя тези теми в блога.
В следващите статии подготвям решения за често срещани проблеми като: как да работя с ftp, какво да правя, ако уебсайтът има празен екран или фатална грешка и т.н. Като алтернатива, не се колебайте да ми пишете това, което ви интересува, и с удоволствие ще отговоря.