Как да намалите размера и разделителната способност на уеб изображенията с FastStone Resizer
В тази статия ще обясня как да оптимизирам изображения за уеб. От какво се състои? Е, да коригираме размера на всяко изображение към този на нашия уебсайт (сега ще видим какъв е това) и да намалим разделителната му способност до че изображението „тежи“ по-малко. Тоест намалете размера му в пиксели и в байтове. Сега, когато сме наясно, Да отидем на бъркотията!
Размерът на изображенията влияе върху скоростта и позиционирането на нашия уебсайт
Всеки, който е използвал измервателни инструменти скорост на зареждане на вашия уебсайт, ще сте забелязали това изображения са отговорни за много висок процент от време и размер на зареждане от нашия уебсайт. Това е един от първите фактори, които трябва да оптимизираме, тъй като Google наказва високи времена на зареждане.
В тази статия от моя приятел Jesús AF можете да намерите инструменти и съвети, които ще ви помогнат подобрете скоростта на вашия уебсайт.
Времето за зареждане на изображение основно зависи от два фактора:
- Размерът на изображението в байтове. Този размер е по-голям, колкото по-голямо е (в пиксели) изображението и колкото по-висока е разделителната способност (в точки на инч или dpi).
- Ако размерът в пиксели (ширина и височина) съвпада точно с контейнера за изображение
Първото нещо е да бъде ясно, че размерът в пиксели и разделителната способност на изображението са различни неща. Ако искаме да отидем по-дълбоко тук, можем (на английски).
ДА СЕ практически ефекти това, което ни интересува, е да знаем, че трябва коригирайте изображението според размера на контейнера, където ще бъде вмъкнато и това разделителната способност трябва да бъде намалена до 72 dpi за да намерим баланс между качество и размер на изображението на нашия уебсайт. Ако не го направим по този начин, имаме два ефекта:
- The по-голям размер в байтове прави браузърът отнема повече време за изтегляне. Тогава ще видим конкретните цифри, за които говорим.
- Ако той размерът в пиксели (ширина и височина) на изображението не съответства на елемента, който го съдържа, браузърът на потребителя (било то Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera или друг) ще трябва да направи изчисления, за да намали размера на изображението и да го покаже правилно. Това се превръща в време за процес, което кара нашия уебсайт да отнеме повече време за показване.
Как да оптимизираме изображение за мрежата
Можем да използваме множество от инструменти за промяна на параметрите на размера и разделителната способност на изображението, но благодарение на разговор във Facebook открих страхотен инструмент, наречен FastStone Resizer.
Тази проста програма ви позволява да оптимизирате изображенията в мрежата по много прост начин. И също така позволява групова работа, тоест прилагане на едни и същи настройки към няколко изображения едновременно.
Какъв е правилният размер за изображенията в моя уебсайт
добре зависи от елемента, който го съдържа. Тук можете да научите малко повече за маркера "div", който е най-общият контейнер, който ще намерим, но е технически факт, че повечето потребители дори не трябва да знаят 😉
Да знам точните данни за размера Имаме инструменти, някои по-общи и други по-специфични, но най-лесният начин е да използвате инспектор на елементи използвани от почти всички основни браузъри днес. Инспекторът на елементи ни помага на програмистите в определени технически задачи.
Ще трябва да търсим (или да създадем от нулата) изображение с максималната ширина, която ни интересува на нашия уебсайт. В моя случай обикновено използвам пълната ширина на колоната на статията, която е 795 пиксела, но може да се случи, че искаме да включим по-малко изображение и процесът ще бъде същият.