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

Индекс на съдържанието

Този баланс не е по прищявка или случайност, тъй като има няколко много сериозни причини, поради които трябва да обърнете много внимание, обърнете внимание:

изображенията

  • Преобразуване: Уебсайт, където времето за зареждане на изображенията е малко, има повече възможности за задържат потребител и ги превръщат в потенциален клиент. По-голямата част от времето потребителите нямат много търпение и дългото време за зареждане може да доведе до загуба на потенциални клиенти.

  • SEO: Всичките могъщи Google взема предвид времето за зареждане, адаптация към устройства и оптимална навигация, наред с други аспекти, следователно това е ключов момент за нашия уебсайт. Те вземат предвид, че потребителят се радва на a гладка и положителна навигация, и това има пряко въздействие върху позиционирането на вашия уебсайт, като ви възнаграждава, ако е добро, или ви наказва по друг начин.

  • Визуално: Качеството на изображенията също е много важно визуално. Уебсайтът или блогът с изображения с добро качество ще даде сериозен имидж или професионализъм на нашия бизнес, нещо от голямо значение, предвид високото конкурентно ниво в мрежата.

Добре е да знаете различните формати, които съществуват.

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

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

  • GIF: Това е донякъде остарял формат, само че е бил анимации.

  • EPS/SVG: Важността на векторни изображения все по-видимо е. Те могат да се прилагат върху икони и лога, и да бъде мащабирано до всякакъв размер или разделителна способност, без да губите никакво качество, тъй като векторният формат е съставен от поредица от математически атрибути, които благоприятстват това, в сравнение с предишните формати, които са растеризирани формати, съставени от пиксели.


ЗАБЕЛЕЖКА : Когато записвате с опция Преплетени (ако е PNG) или Прогресивно (ако е JPG), ние правим зареждането в мрежата прогресивно, тоест изглежда с ниска разделителна способност и докато се зарежда, рязкостта му се подобрява. Ако не изберем тази опция, изображението ще се появи при зареждане, нещо, което може да не е толкова добро визуално.

Има няколко опции за оптимизиране на нашите изображения.

Основните програми за ретуширане на снимки и дизайн, като Photoshop и Illustrator, ви дават възможност да Запазете директно за мрежата, От панела, който се отваря, избираме различните опции, качества и формати, с предварителен преглед, който ни помага да разберем крайното тегло и неговото качество (острота). В тези две програми го намираме във File> Save for web ...

Има няколко специфични програми за инсталиране на компютър или MAC, за да се намали теглото на изображенията. Оставяме ви по една за всяка операционна система:

Бунт (компютър)

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

Програмата поддържа много формати на изображения, PSD на Photoshop сред тях, но можем да запишем резултата само в три вида: JPEG, GIF и PNG.

Оптимизирайте изображенията, така те заемат по-малко дисково пространство и се зареждат по-бързо, като намират по-добри настройки за компресия и премахват ненужните коментари и цветни профили. Поддържа PNG, JPEG и анимирани GIF файлове.

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

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

Компресирате и оптимизирате директно от мрежата, и поддържа 4 вида формати, най-често срещаните: JPEG, PNG, GIF и SVG. Имате две възможности, Lossless, която вярно поддържа качеството на изображението, въпреки че не намалява максимално теглото, и Lossy, която намалява изображението до 90%, въпреки че намалява малко качеството на изображението. Трябва да преценим кой вариант ни интересува най-много.

Специализиран в JPG и PNG компресия (съответно).

TyniPNG използва интелигентен тип компресия Lossy, за да намали размера на PNG файловете, намалявайки броя на цветовете в изображението, така че да изисква по-малко байтове съхранение. Това едва се вижда, но разликата в размера е голяма. Запазва изцяло прозрачността на фона.
ЗАБЕЛЕЖКА: Той има приставка за WordPress и Photoshop.

TyniJPEG прави същото, но с JPG файлове и е така способен да намали размера на файла до 70%, без да губите никакво качество с един поглед.

Много подобен на предишните по производителност, със системата Lossy and Lossless, добавяйки, че изображението остава да бъде изтеглени за 12ч.

Освен това има a Опция за професионален акаунт, който идва с някои екстри: компресирайте изображения чрез URL, изберете ширината и размера на височината след компресиране, качете файлове до 16MB и облак за достъп до вашите файлове от всяко място.

За да оптимизираме изображенията в нашия WordPress, имаме различни плъгини за него.

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

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


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

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

Точка, която трябва да се спомене, е излитането на екраните Ретина или 2k, особено в света на Apple. В момента най-надеждното решение е да се удвои разделителната способност на изображенията, така че да се виждат перфектно и ако се направят добре, теглото им ще се увеличи много малко. Има решения за показване на изображенията в една или друга резолюция в зависимост от вида на екрана, който се показва.