Оптимизиране на изображения (картинки и снимки) на сайта
Как да се оптимизира изображението
За да започнете, помислете за процеса на оптимизиране на изображения и снимки преди да ги публикувате в статията. В зависимост от размера и качеството на теглото на всеки от неоптимизиран снимки или снимки може да достигне астрономически магнитуд 100KB или 200KB, което може да се сравни с текстов документ, съставен от около 35 хиляди души. 200 000 думи или символи. Е, толкова впечатляващо? В действителност това е цялата книга или дисертация от 110 стандартни страници формат A4.
За да направите вашите снимки, публикувани са с добро качество, но с ниско тегло, те трябва да се съхраняват по подходящ и оптимален за всеки тип формат. Най-често срещани графични формати: JPG. GIF и PNG (8 или 24).
JPG - най-оптималния формат за изображения и многоцветни изображения с много цветове и тонове. Снимки в този формат .jpg имат разширение и да имат най-доброто качество на сравнително ниско тегло файлове.
PNG - друг формат като най-висока степен на компресия на файлове с изображения, поддържани от прозрачност и много повече, отколкото формат GIF, броят на цветовете. Изображения, записани в този формат имат разширение .png са пълноцветни и не губи качество при максимално намаляване на теглото. Ето защо, този формат е оптимизиран за използване с наклон се снимки на екрана, красиви икони с прозрачни области. Единственият недостатък на този формат е липсата на подкрепа в по-ранните версии на Internet Explorer (IE 5,5-6), която управлява използването на CSS-хакове.
В Photoshop: отворите изображението в раздел (файл) Файл щракнете върху елемента, запазете за WEB (С изключение на Web) и настройте желаната форма и качество на изображението в изскачащ прозорец.
На екранната ясно видима разлика между неоптимизирана снимката (тегло: 269K) и оптимизирана (I понижава качеството на до 70% като снимки тегло намалява до 35,18K, тя е почти 8 пъти).
В Paint.Net: отворите изображението, изберете раздела Файл щракнете върху Запиши като. , изскачащ прозорец, въведете желаното име на файл, кликнете върху бутона Запазване и изскачащия прозорец до определен желаното качество на изображението като процент.
Както можете да видите, аз избрах за пример, използван в тези снимки, една и съща 70%, но резултатът е надминал дори имам Photoshop (което не очаквах). Напомни на оригиналното изображение от теглото имахме 269K, четки с 70% го мачка и 35K, а Paint.Net да 22,5K.
Оптимизация на фонови изображения, използвани в сайта за дизайн
Различни методи могат да се използват за оптимизиране на фонови изображения, снимки и икони на различни сайтове, включително и компресиране на конвенционални методи, описани по-горе ми, а освен тях още:
- Използването спрайтове - Всички използвани снимки и картини са събрани в един файл (спрайт, обикновено PNG) и се показват на правилното място, с помощта на позициониране в CSS (имот: фон-позиция).
- кодиране на изображението в base64 - реални снимки тежат много повече, отколкото им кодирана в base64 формат текстова версия. Аз обикновено използвам онлайн услугата. с която не само може да кодира и декодира но всяко изображение
И двете по-горе метод може значително да увеличи скоростта на изтегляне, чрез намаляване на броя на компонентите, необходими за зареждане на всяка страница, и поради това намалява броя на исканията HTTP до сървъра, и в допълнение, кодирани в base64 и се събира в изхода на спрайт изображение чрез CSS стилове са кеширани от браузърите, и по този начин на вторичния потребител, посещаващи сайта тя ще се зареди по-бързо.