Как да запазите изображения с най-добро качество и най-ниско тегло

Здравей, добро! Ето нещо, което всички (да, всички!) трябва да знаят. Те са много прости съвети за избор на правилния формат за нашите изображения, така че да изглеждат най-добре и да тежат малко в документите, презентациите или каквото искаме да направим. Това е само малко здрав разум, не струва нищо и наистина се оценява с времето.
Това е толкова здрав разум, че го научих от опит, за съжаление виждам отново и отново, че малко хора са наясно с това, дори хора, които се наричат дизайнери.
Коренът на всичко това: снимка или графика?
Ще разбираме графика като изображение, генерирано от компютър, тоест не е получено от заснемане на снимка (независимо колко цифрова е тя) или от сканиране на хартия, а че е абсолютно чисто, перфектно, в което всеки пиксел е умишлено нарисуван. Добър пример е екранната снимка на интерфейса, който използвам, за да напиша тази публикация:
В това изображение всеки отделен пиксел е важен и не непременно еднакъв или близък по цвят до околните пиксели. Прецизността е абсолютна, защото е рисунка, направена математически от компютър. Имайте предвид, че векторните изображения също попадат в тази категория, като например:
Другата характеристика на графиката е, че те имат плоски цветове, както в интерфейса на wordpress, така и в мема на Яо Минг има много напълно бели пиксели. С други думи, те са склонни да повтарят много пиксели с абсолютно същия цвят.
По снимка ще разберем останалите изображения, както заснети от реалния свят, така и генерирани от компютър, в който толкова много пиксели не се повтарят и въпреки че могат да имат много детайли, всеки пиксел винаги е заобиколен от подобни пиксели. Добър пример е снимка на националния парк Huerquehue:
На снимката гората има много детайли, но дори там и в храстите цветовете на всеки пиксел са свързани с тези около него. Забелязва се, когато увеличите:
А от мащабирането можете да видите и другата характеристика на снимките: Без значение колко изчистени изглеждат цветовете, съседните пиксели ще имат тенденция да се различават леко по цвят, така че математически няма да има области с абсолютно същия цвят, както в графиката, въпреки че може да има цветове, много подобни на небето.
Добре, разбирам ... Но каква е ползата да знаеш всичко това? Е, тъй като в основата си има два типа формати на изображения: Точните и форматите за възприятие (Имайте предвид, че тези имена току-що са измислени с дидактическа цел, не ми е целта да бъда много строг, а да предам общата идея)
Точни формати на изображения (GIF, PNG)
Точните формати компресират изображения по начин, подобен на начина, по който работи WinZip. Те правят изображението, като отчитат точните стойности на пикселите и търсят повтарящи се модели, които могат да идентифицират области от един цвят и подобни неща. Ето защо те са страхотни със скрийншотове, където обикновено има големи бели и/или други цветни области. В допълнение, ако са точни, те реконструират оригиналното изображение без изкривяване.