scf4u – Оптимизирано вмъкване на изображения
От много време искам да напиша този пост. Все не стига или време, или желание. Е сега явно е ударил часът. Замисляли ли сте се, кои са основните елементи в дадена страница?
Това са текст, изображения и разбира се стиловите елементи. В тази статия, ще се спрем върху изображенията. Спирам се върху тях, защото това са и често най-грешно използваните елементи. Какво визирам под грешно? Колко от Вас, занимаващи се с изграждане на уеб страници, винаги указват размерите на дадено изображение?
Повечето дизайнери/програмисти смятат, че ако то ще се използва в истинските му размери, т.е. няма да бъде преоразмерявано, няма нужда да му се укажат стойностите на широчина(width) и височина(height). И действително, дори да не ги укажете, всичко се визуализира нормално и Вие решавате “щом работи, няма нужда да се указват”. Е да, ама не.
При зареждането на страницата, ако не са указани размери на изображението, то браузърът по подразбиране задава размери 10×10 и поставя останалите елементи от страница, докато се зареди изображението. В не един и два случая обаче, размерите на изображението се оказват други, те се поправят, и елементите трябва да се пренаредят. Това бави зареждането на страницата, а ние далеч не желаем това.
Ясно е, че е неудобно всеки път, да проверяваме какъв е размера на изображението, което включваме в дадена странца. Защо да не автоматизираме този процес? За целта написах един прост клас scf4u(SimpleClassFunctions4you), с две функции. Ще използвам този клас, като дописвам и други такива функции, които ще видите в следващите статии.
Сега към кода на първата функция:
/** * @desctiption: Simple php function that calculates image's * width and height. The first parameter is contains * Image File URL, the second is for image border, and the last * defines image's alt. * @based: Based on Hack #9 from PHP Hacks by Jack D(O'Reilly) * @created: 17 May 2008 **/ public function img0($file, $border, $alt){ $clean = array(); $clean['alt'] = htmlentities($alt, ENT_QUOTES, 'UTF-8'); if(ctype_digit($border)){ $clean['border'] = $border; } else{ $clean['border'] = 0; } list($width, $height) = getimagesize($file); echo( "<img src=\"{$file}\" style=\" width: {$width}; height :{$height};\" border=\"{$clean['border']}\" alt=\"{$clean['alt']}\" />"); }
С простата функция img0() задавате пътя до изображенето, рамката, която искате да му приложите и разбира се описанието му(alt). Функцията, започва със създаването на празен масив, в който ще съхраняваме филтрираните данни. С помощта на htmlentities() заместваме всякакви символи, които биха могли да се изпълнят от браузъра с техните HTML заместители. Чрез getimagesize() се определят размерите на изображението и се описват в края на функцията.
Разбира се, често ни се налага и да преоразмеряваме изображенията, които ще използваме в странциата си. Най-добре е това да се прави предварително, за да не се налага потребителският браузър да го прави, но все пак се налага понякога. Ето и функция, идентична като горепосочената, но с два параметъра за широчина(width) и височина(height):
/** * @desctiption: Simple php function. The first parameter is contains * Image File URL, the second is for image border, and the last * defines image's alt. * @based: Based on Hack #9 from PHP Hacks by Jack D(O'Reilly) * @created: 17 May 2008 **/ public function img1($file, $border, $alt, $width, $height){ $clean = array(); $clean['alt'] = htmlentities($alt, ENT_QUOTES, 'UTF-8'); $nums = array(); if(!ctype_digit($border) ? $num['border'] = $border : $num['border'] = 0); if(!ctype_digit($width) ? $num['width'] = $height : $num['width'] = 0); if(!ctype_digit($height) ? $num['height'] = $height : $num['height'] = 0); list($width, $height) = getimagesize($file); echo( "<img src=\"{$file}\" style=\" width: {$num['width']}; height :{$num['height']};\" border=\"{$num['border']}\" alt=\"{$clean['alt']}\" />"); }
Обединявам двете функции в един клас – scf4u(SimpleClassFunctions4you). Ще има следващи прости, но полезни функции, които ще дописвам в него. В следващата статия мисля, да засегна хеширането на стрингове, но приемам и идеи.
Държа да отбележа, че идеята за тези функции, дойде от книгата “PHP Хакове” – O’Reilly. В книгата е указано, че при използване на съвсем малки части от кода, то те не претендират за собственост върху тях и дори не е задължително да бъдат указани като източник, все пак държа да го отбележа.
Можете да свалите класа от тук:
[Download scf4u - tar.bz2 (11.4KB)]
[Download scf4u - rar (12.5KB)]
Класът се разпространява под GNU General Public License version 3 или по-нова
August 20th, 2008 09:46
Да видим дали правилно сме разбрали… предлагаш при всяка визуализация на снимка да отваряме изображението с PHP, да му вземем размерите и да го изплюем тогава в xhtml-а заедно с генерираната style дефиниция?
Говорейки за оптимизация…
August 20th, 2008 17:42
Говоря за изображения, които ще бъдат вмъкнати динамично. Ако изображенията биват използвани в темплейта, то е по-логично да им бъдат взети размерите ръчно и да бъдат посочени.
А едно отваряне и взимане на размерите на изображение, не товари сървъра толкова, колкото товари потребителската машина определянето на размерите от браузъра
August 24th, 2008 00:19
Хм, не съм особено съгласен. User agent-а (браузера) така или иначе взима параметрите на всички изображения – включително и широчината и височината. Та в случай, че изрично не си посочил размерите на изображението, той слага автоматично тези, които са заложени във файла. Т.е. при нареждането на обектите в уеб-страницата разликата дали ти ще му подадеш размерите на изображението на браузера или той ще си ги вземе е… незначителна, ако ще и да си секрет в носната кухина на костенурка.
От друга гледна точка трупаме излишни бази данни с размерите на изображенията (защото до колкото разбрах това ти е идеята), което при един по-сериозен сайт прави и заявките малко по-сложни за обхождане, пък и взимаме данни от 2 полета повече. ОК, не чак кой-знае колко, но със сигурност повече, отколкото натоварването на потребителския браузер да прочете width и height на вече дръпнатото изображение
August 30th, 2008 13:36
Мъро, има само един начин да разбереш. Намери или си направи някакъв тежък дизайн. Примерно нарязан с Фотошоп. без да определяш големината на изображенията го отвори.
В началото всяко изображение е малка клетчица 10×10…след което със зареждане на всяка се преоразмеряват. След което изтрий кеша и им укажи на всяко едно големината.
За засичането използвай адони, като Web Developer за Firefox. И засечи, при кой случай страницата се е заредила по-бързо.
Ще останеш учуден
January 31st, 2009 09:59
Тази “аритметична captcha” ми къса нервите
Както и да е — по същество. Написаното е интересно, но ми се струва малко късогледо – в смисъл “premature optimization”. Функцията
getImageSize()“товари” заради обръщането към файловата система за да се изчете файла на картинката. Така представеното решение може би ще върши работа, ако резултатите отgetImageSize()се кешират, и не е необходимо да се викаgetImageSize()за всяко зареждане на страницата/адреса.January 31st, 2009 10:00
А, и защо border-а не е вътре в
style=".."атрибутаJanuary 31st, 2009 17:31
Не съм обърнал внимание. Моя грешка