Как да намалите изображението за сайта

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

Оптимизиране на изображения могат да се видят по два начина:

  • намаляване на теглото на изображения, за да се увеличи скоростта на зареждане;
  • като SEO компонент - около ptimizatsii - в този случай, в допълнение към намаляване на теглото на изображенията са възложени на съответните имена и ALT таговете са написани.

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


Въведение: Защо се намали теглото на изображенията на сайта

Мисля, че всеки от нас е отдавна знаят, че теглото на имиджа влияе на скоростта на зареждане на страници.

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

Каква трябва да бъде теглото на изображенията?

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

Изображение на теглото е измерено в килобайти (КВ) или мегабайта (МБ), в зависимост от размера на пиксела (височина и широчина), броят на части и размера на изображението.

За да се намали теглото на картинката:
  1. Определяне на размера на изображението, което да се показва на сайта.
    Не зареждайте изходните изображения наведнъж. Ако сайтът ви показва изображение с размери 500 * 600 пиксела, и изображението се изтегля 3 пъти по-голям, времето за зареждане ще бъде същата като на оригинала.


1. Как да се намали размера на изображението в Paint

1. Отворете изображението в Paint и натиснете бутона "Промяна на размера" на горния панел.

2. В прозореца, който се отваря, въведете необходимите размери (можете да промените процент може да бъде в пиксели. Боя по подразбиране е от кърлеж "Поддържане на пропорциите". Това ще намали образ без изкривяване), щракнете върху "OK".


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


Сега сравни оригиналното изображение и на финала:

оригиналното изображение с размери 2184 * 1456 PC и с тегло 735 KB, след като е намалена до 750 * 500 бр беше да тежи 142 KB - намалено тегло 5 пъти!

В този случай, разликата в качеството на изображението и намаляване на източника, намалява скриптове (ако е инсталиран на място) на окото не се вижда.

2. Как да се намали P hotoshop за размер на изображението

2. Ширината може да варира параметър е отворен прозорец (Ширина). височина (височина) и разделителна способност (Resolution). Освен това, съотношението на кутия се държи аспект (Constrain Пропорции) трябва да бъдат маркирани, за да се запази пропорции. В този случай, когато един от параметрите, а други се променят автоматично.
Graphics се публикува на интернет е, резолюция е 72pk / инч.


Представяме на необходимите параметри и натиснете "ОК".

3. Запазване на изображението.


За да запазите изображението има три възможности:

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

Когато изберете запаметена за мрежата в прозореца, който се отваря, можете да зададете следните параметри:

  • Качество (Quality) - този параметър варира от 0 до 100, съответно, при което полученото изображение ще бъде добро или по-ниско качество.
    В полето отляво на разделите можете да изберете опции за показване: оригинал, оптимизиран, 2 заври Anta (показва едновременно спестява и полученото изображение), Вариант 4 (показване на оригиналното изображение, изображението с посочените от Вас настройки и междинно 2).

    Аз обикновено избират Вариант 2 (2-Up) - промяна на качеството, което може едновременно да видите промените в изображението и да изберете най-доброто за дадено приложение. За една статия аз съм доволен от качеството на 50, но това не е константа, често съм запазвате изображения в рамките на 60-75.

    По-долу показва изпълнения на данни се показват в окончателното изображение в зависимост от предварително зададено ниво;

  • Прогресивно проверка бележка (Progressive).
    AkzoNobel и изображението не се зарежда линия с няколко подхода.
    Може би трябваше да се справят с такива случаи, когато не виждате половината от натоварената изображението и на първо място - пълна - с лошо качество, а след това - все по-добър. Но от началото на зареждането на даден потребител има представа какво изображението. Прогресивно тегло може да бъде повече от няколко килобайта оптимизирани, но разликата е незначителна. Практиката показва, че потребителите на прогресивни dzhipeg възприемат по-положително.
  • Измерения.
    Ако искате да промените размера на изображението, те са разположени в един и същи прозорец долу.

    Ние анализираме резултатите от оптимизацията на изображението в Photoshop:

    оригиналното изображение все едно 2184 * 1456 компютъра. 735 Kb. след намаляване до 750 * 500 бр. по време на нормална sohranenii1 59KB - тегло по-голямо от спад в боя, с изключение на мрежата (към 50) - 63.7 КБ. Сгъстен ЕСИТ изображение 11.5 пъти по-малко. Не забравяйте, че всички други плюсове dzhipeg също прогресивни.

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

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

    3. Онлайн услуги за оптимизиране на изображения

    Вече миниатюри допълнително оптимизирана с помощта на онлайн услуги. На интернет, те имат достатъчно, ще опиша двамата, които най-често използвам.


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

    .jpg формат. PNG. GIF. Осигурява 3 варианта за оптимизиране:

    1. Компресия със загуби е със загуби - избрана по подразбиране;
    2. Lossless - Lossless;
    3. Експерт - с възможност за избор на параметри за оптимизация.

    Качване на файлове, които трябва да бъдат оптимизирани.

    След приключване на услугата оптимизация предвижда отчитане на резултатите. За да заредите файла кликнете върху бутона «Имате w nload File» - намалена картина се отваря в следващия раздел.

    Ако е удовлетворена от резултата, запазване на изображението (кликнете върху снимката, щракнете с десния бутон - Запиши като)


    А прост интерфейс за оптимизиране на резултата може да се гледа веднага. Тя работи само с JPEG формат.

    Service компресиране на изображението в JPG, PNG и GIF- £ формат на представяне. Е има ограничение в теглото на 500K и броя 20 едновременно.

    4. Намаляване на размера с помощта на компресия на изображението плъгини

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

    • Plugins предварително поколение на миниатюри.
      В настройките на плъгина за задаване на размера на миниатюрните изображения. миниатюрни размери са посочени, когато зареждате файл.
      Предимството на този метод е, че при зареждане на номера на страницата на изображенията не се отразява поколение на страницата. Но когато голям брой файлове и миниатюри ще се увеличи и на терените, дисково пространство.
  • Приставките с динамично да променят размера на миниатюри.
    Изображението се обработва, за да се генерира страница, тя не заема място на диска, но негативно влияние върху времето за зареждане. Не се препоръчва за оттеглянето на голям брой изображения.

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

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