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

Случвало ли ви се е да сте влезли в уеб страница или в блог и да ви е скучно да чакате всички изображения да се заредят? Уверявам ви, че лично на мен това ми се е случвало неведнъж.

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

вашия уебсайт

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

Повечето потребители, включително аз, напускат, преди да изчакат всичко да се зареди (ако времето за изчакване е твърде дълго); с това, което вашият уебсайт губи посещения и потенциални клиенти.

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

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

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

След като вече знаете какво е оптимизиране на изображението и защо се нуждаете от него, нека започнем урока.

ЕТАП 1

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

СТЪПКА 2

Изберете изображението, което искате да качите на вашия уебсайт, и го отворете в Photoshop. След като го получите, отидете на Изображение -> Размер на изображението.

Ще видите отворен плаващ прозорец. Обърнете внимание, защото сега идва важното.

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

Със сигурност след промяна на разделителната способност ще се промени и ширината на изображението. Дори и така, трябва да се уверите, че изображението е с желаната от вас ширина. Така че в полето, където имате възможност да го промените, напишете широките пиксели, които вашият блог има. След като го направите, можете да щракнете върху OK, за да затворите прозореца.

В това изображение оставям полетата за ширина маркирани в червено (ширина) и резолюцията (резолюция).

СТЪПКА 3

Сега имате изображението с размера, който ви интересува. Една от основните грешки на изображенията в мрежата е, че те не се записват като такива, а се запазват "al tun-tún" и това ни кара да добавяме ненужна тежест.

Така, за да запазите изображението си, следвайте този път: Файл → Запазване за мрежата. Отново ще се отвори прозорец с много опции.

На този етап можете да избирате между няколко опции за запазване на вашето изображение. Най-често срещаните са тези:

  • JPEG: Това е най-често срещаният формат за компресиране на изображения. Винаги се използва за снимки, защото ги компресира много добре, без да губи качеството им.
  • PNG: Идеален е, когато имаме икони, лога или вектори без фон. Тези файлове тежат малко повече, но са много необходими, когато искаме да запазим нещо "с прозрачен фон".

В този случай, тъй като записвате снимки, ще изберете опцията JPEG и в нея можете да играете с нейното качество. Колкото повече качество има, толкова повече ще ви тежи (макар и не толкова, колкото ви тежеше в началото).

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

Веднага след като сте решили с какво качество искате да го запазите, кликнете върху „Запазване“ и изберете къде искате да го запазите.

И това е! Толкова е просто и бързо да направите изображенията в блога си по-бързо заредени, така че потребителите ви да не трябва да чакат, за да ги видят, и без да губят качество. Фантастично, нали?

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

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

За да разберете ширината на публикацията си, независимо от платформата, която използвате, можете да използвате разширение за Chrome, наречено Page Ruler, което работи като линийка.

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