Оптимизирайте снимките си с предварително дефинирани размери на изображенията [WordPress Tip]

Оптимизирането на изображения на уебсайт е трудна задача. Можете да изберете да използвате по-малко изображения, компресирани изображения, спрайтове или svg; списъкът продължава. Едно място, където се спъват много WordPress сайтове, е в определянето на размерите на изображението, което е a решаващ аспект на оптимизирането на съдържателни сайтове.

Размерите на изображенията са от жизненоважно значение, тъй като изображенията се създават автоматично според размерите, дадени при качване на изображения. Това гарантира, че дори ако имате 3000px широко оригинално изображение, то никога не се използва, ако е достатъчно изображение от 600 пиксела. В идеалния случай широкото пространство от 600 пиксела трябва да използва 600 пиксела широк образ, вместо да намалява по-голямо изображение.

В тази статия ще ви разкажа какви са размерите на изображението и как да ги дефинираме.

Как WordPress обработва изображения

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

Когато качите изображение чрез WordPress, той генерира версии на тези изображения и ги съхранява отделно. Например, ако качите 1200 × 800 изображение, WordPress може да създаде 100 × 100, 600 × 400 и 900 × 600 версии. Когато вмъкнете изображение и изберете "средна", ще се използва действителната версия на носителя, за разлика от намалената версия на оригинала.

Това е изключително полезно, защото то запазва пропускателната способност на сървъра и времето за обработка на клиентския компютър. Мисля, че не е изненадващо, че свалянето на 600 × 400 изображение е по-бързо от изтеглянето на 1200 × 800 изображение.

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

Правото изображение на правилното място

Крайната цел трябва да бъде винаги използвайте подходящи размери на изображението. Ако се нуждаете от изображение с размери 440 × 380, вземете изображение с точния размер от сървъра. Има две основни места, където ще се използват качени изображения: включени изображения и снимки в пост - бих препоръчал да се фокусирате върху изображенията.

Във всички, с изключение на най-визуално направените статии, няма значение дали една поща е 220px или 245px ширина. Която и версия да е налична, ще бъде еднакво използваема. Представените изображения обаче обикновено се показват с общи размери. За списъци със статии можете да използвате 178 × 178 миниатюри, за заглавията на статии можете да използвате изображение с размери 1200 × 600.

В допълнение към тях може да искате да запазите отделна миниатюра / среден / голям размер, както е определено в настройките на ще ви даде лесен достъп до определени размери при добавяне на изображения към публикации.

Така че това, което всичко се свежда до това е: Не би ли било чудесно, ако имахме два допълнителни размера на изображението, които бихме могли да използваме за представените изображения? Тези размери на изображението ще бъдат създадени точно до останалите, когато се качи изображение. Добрата новина е, че WordPress ви покрива с доста проста функция.

Създаване на изображения

С помощта на функция add_image_size () можете да дефинирате всички размери на изображенията, от които се нуждаете. Нека създадем двата примера, споменати по-горе. Поставете кода по-долу във файла functions.php на темата или във файла на приставката.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Както виждате, тази функция приема четири параметъра. Първият параметър ви позволява да зададете име за размера. Вторият параметър е максималната ширина, третата, максималната височина. Четвъртият параметър задава силно изрязване. Ако е зададено true, изображението ще бъде създадено с точния размер, който сте посочили.

След като това бъде добавено към вашата тема или плъгин, WordPress ще създаде две нови версии на всеки файл, който качвате.

Използване на размерите на изображението

Тези размери на изображения могат да се използват в редица функции, които се занимават с извличане на носители. Нека първо да разгледаме представените изображения. the_post_thumbnail () обикновено се използва за показване на представеното изображение на публикация. Следният код може да бъде поставен в цикъл на WordPress:

 _post_thumbnail ('featured_thumbnail'); 

Първият параметър на тази функция ви позволява да зададете размера на изображението, което да използвате. Тъй като посочих „featured_thumbnail“, ще бъде използвана 178 × 178 версията на този файл.

Има редица други функции като wp_get_attachment_image ()и wp_get_attachment_image_src () които също използват параметъра за размер на изображението. Когато използвате такава функция, винаги трябва да укажете подходящ размер на изображението.

Регенериране на миниатюри

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

Не се страхувайте, плъгинът за регенериране на миниатюри ще направи нещата по-добри! Този плъгин може да регенерира миниатюрите за всички ваши изображения, като се вземат предвид всички дефинирани размери на изображенията. Може също насочете към конкретно изображение, което е полезно, ако имате само няколко, или правите някои тестове.

След като се възстановят миниатюрите, трябва да видите оптимизираните версии, заредени на сайта Ви. Можете да проверите това, като прегледате източника на изображението. Ако сте качили 'example.jpeg' и виждате 'example.jpeg' като източник на вашето представено изображение, нещо не е наред. Ако виждаш “Например-178 × 178.jpeg” тогава всичко е наред; се показва оптимизираното изображение.

Отзивчиви изображения

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

Най-лесното решение е да използвате плъгин като Hammy. Hammy работи въз основа на ширината на съдържанието на вашата тема (за разлика от ширината на прозореца на браузъра) и може да обслужва оптимизирани изображения въз основа на това. Това е особено удобно за мобилни потребители, където може да се окаже проблем при обработката и пропускателната способност.

Допълнителна оптимизация на изображението

Както споменах във въведението, има безброй начини за оптимизиране на изображенията. От спрайтове до компресиране на изображения могат да се използват много техники, за да се намали времето за зареждане, което идва ръка за ръка с изображенията. Ashutosh KS е написал страхотна статия, представяща 9 WordPress Plugins за подобряване на производителността на изображението.!

Също така ви предлагам да погледнете Hassle Free Responsive Images, който ви показва как да добавите поддръжка за елемента на картината, нещо, което искате да използвате, ако искате да напишете свой собствен код.