Сайт үшін суреттерді оңтайландыру

Кескін қандай өлшемде болуы керек және оның салмағын қалай азайтуға болады
Сайттарды жылдам жүктеу үшін суреттерді оңтайландыру қажет: кез келген графикалық редактордың көмегімен енін немесе биіктігін азайту ( тегін онлайн редакторларды пайдалануға болады), содан кейін TinyPNG қызметіндегі фотосуретті қысу.
Сурет жеңілірек болса, соншалықты тезірек жүктейді. Салмағы екі параметрге байланысты:
1, Ені мен биіктігі бойынша пиксель өлшемдері (3000x2000 пиксель фотосуреті 300x200 пиксел фотосуретінен ауыр)
2. Суреттің мазмұны – фотосуреттегі ұсақ детальдар мен түстер неғұрлым көп болса, соғұрлым оның салмағы соғұрлым көп болады.

Ең жақсысы - алдымен кескіннің өлшемін өзгерту, содан кейін артық ақпаратты алып тастау, одан әрі салмақты азайту.
Кескіннің өлшемі қандай болуы керек?
Барлық үлкен суреттер Tilda-ға кері жүктегенде үлкен жағында автоматты түрде 1680 px дейін азаяды. 1680 px-тен кіші суреттер бастапқы өлшемін сақтайды.

Кескін бағдарламалық жасақтамамен азайған сайын сапасы азып-тозады және салмағы жеткілікті дәрежеде оңтайландырылмайды.
Үлкен фотосуреттерді Tilda-ға кері жүктеу алдында үлкен жағында кем дегенде 1680 px дейін төмендетіңіз.
Идеалды түрде сайттағыдай өлшемдегі суреттерді кері жүктеу керек. Егер фотосуреттің өзі орналасудағы кескін өлшеміне сәйкес келмесе, браузер кішірейеді немесе созылады. Ол екеуін де нашар жасайды, сондықтан фотосурет бұлыңғыр болады.

Суреттің өлшемін анықтау үшін бетке блок қосып, торды қосыңыз (кез келген мәтіндік блок параметрлерінде), фотосуреттің қанша баған алатынын қараңыз. Бір баған 60 px, бағаналар арасындағы қашықтық 40 px.
В редакторе страницы: изображение шириной в 6 колонок (560 px) слева и изображение шириной в 3 колонки (260 px) справа на 12-колоночной сетке.
Сетка Zero Block: схема соответствия ширины элементов в пикселях количеству колонок 12-колоночной сетки.
Кескіннің салмағын барынша азайтуға болады?
Ұқсас түстерді біріктіру арқылы суреттерді қысатын арнайы бағдарламалар бар. Олар мұны өте ақылмен жасайды – көзбен шолып, айырмашылық жоқ, бірақ фотосуреттің салмағы айтарлықтай төмендейді – ол 70%-ға дейін жетуі мүмкін.

Мұндай қызметтердің мысалдары мыналарды қамтиды:
Кескінді оңтайландыру мысалы
Суреттің қалай оңтайландырылғанын көру үшін Unsplash-тан жүктеген Кристоф Бенгтссон Лиссалденің фотосуретінің мысалын қарап көрейікші.

Бастапқы файл өлшемдері: 4405×2478 px және 3,5 Мб.
В Adobe Photoshop: окно «Image Size» с настройками размеров изображения, полями «Width», «Height» и «Resolution».
Оны Тильдаға бұрынғыдай жүктейік. Фотосурет 1680×945 px дейін қиып сызылады, ал оның көлемі 1,2 мб болады.

Photoshop бағдарламасында бастапқы файлды ашып, өлшемдерін 1680×945 px деп өзгертіңіз, содан кейін сақтаңыз, біз 832 кб аламыз.

Суретті TinyPNG-ге кері жүктейік. Фотосурет 353 кб-қа дейін қысқартылды.
В сервисе TinyPNG: исходный и уменьшенный размер файла в строке с результатом сжатия.
Фотосуреттің сапасы өзгерген жоқ.
Made on
Tilda