Imagify Накарайте сайта си да отслабне, като компресирате изображенията му
Знаете ли какво отнема най-много време за зареждане на страница ?
Това не са нито CSS файлове, нито JavaScript файлове.
Това са снимките.
Често се опитваме да оптимизираме скоростта на нашия сайт, като оптимизираме кода (както видяхме при файла .htaccess), но е възможно да постигнем това без много проблеми.
Преди да ви разкажа за приставката WordPress, която използвам за значително намаляване на теглото на изображенията на Marmite, бих искал да ви изпратя ...
3 добри навика за възприемане с изображения
Когато управлявате сайтове, е важно винаги да мислите за посетителите. В моя случай винаги се опитвам да направя най-доброто за вас.
Например, вместо да ви говоря директно за плъгин или нещо друго, искам да ви изпратя информация, която ще ви бъде полезна в бъдеще.
Отнема малко повече време, но знам, че в дългосрочен план това ще направи разликата 😉
Хайде, няма повече бърборене. Нека да преминем към тези 3 съвета !
1. Не изпращайте големи изображения
Независимо дали сте фотограф или не, файловете, създадени от цифров фотоапарат, днес са много големи.
Те могат да тежат от 4 до 8MB, понякога и повече! Всичко зависи от вашите настройки.
За да ги отпечатате или да ги редактирате на компютъра си, това е страхотно.
От друга страна, да ги разпространявате в мрежата, веднага е по-досадно.
Всъщност, ако дадена страница трябва да зареди десет 8MB изображения, посетителите ви ще се възползват от свързването с оптични влакна ...
Най-доброто нещо е да преоразмерите изображенията си, преди да ги качите на вашия сайт. Широчината от 2000 пиксела е повече от достатъчна.
Всеки редактор на изображения може да направи това, но в дългосрочен план може да стане досаден.
На Marmite изображенията винаги са с ширина 600 пиксела в статии (няма нужда от 2000 пиксела широчина). И така, използвам следния код, за да WordPress автоматично преоразмерява качените изображения:
Втората част на кода ви позволява да добавите генерираното изображение към списъка с налични размери:
Това малко парче код не яде хляб, но ще ви спести ценни секунди, това е сигурно 😉
Изберете правилния файлов формат
Вероятно сте запознати с двата основни формата изображения, които са налични днес:
Знаете ли по какво се различават? Това е малко техническо, но е в начина, по който са кодирани.
По принцип как изображенията се записват във файла.
Това несъответствие означава, че някои ще бъдат по-леки в JPG, отколкото в PNG и обратно.
За да ви помогнем да изберете най-добрия формат, не забравяйте, че:
- JPG = Снимки, изображения с хиляди цветове или нюанси на сивото
- PNG = Диаграми, прости изображения, лога или изображения с прозрачност
Можете да научите повече за форматите на изображения с тази инфографика, намерена в Korben.
За да се убедите, конвертирайте снимка, направена с вашия телефон, конвертирайте я в PNG и погледнете нейното тегло.
Компресирайте изображения, преди да ги изпратите
Преди да изпратя изображения на сайт, винаги се грижа да ги компресирам.
Например, след ретуширане на такъв в Photoshop, винаги използвам File> Save for web, за да намеря най-добрия компромис между теглото и качеството:
Превключете в режим на 2 миниатюри и погледнете крайното тегло в долния ляв ъгъл. Можете да играете с форматите и настройките в горния десен ъгъл (и вероятно размера в долния десен ъгъл).
Очевидно е, че не трябва да влошавате твърде много качеството, в противен случай изобразяването ще бъде ужасно.
Ако сте на Mac, препоръчвам помощната програма ImageOptim да компресира повече, без да губи качество.
Толкова за основните съвети. въпреки това, ще ми кажете, че това може да бъде доста ограничително в дългосрочен план.
И ще бъдете прави !
Освен това как да се справите с файлове, които вече са във вашата медийна библиотека ?
Тук идва ...