Najlepsze (alternatywne) kompresje dla *.jpg; *.png - dla WWW

Question

Cześć,

Jakie najlepsze formaty plików pod zdjęcia dla www?
Używam *.jpg, *.png w jakości 90-95%. To zachowuje wymaganą jakość szczegółów i kolorystykę.
Jakie są nowoczesne formaty plików (mobile friendly)? Szczególnie dla większych zdjęć i jak je zapisywać?
Może AVIF, WebP? Ktoś tego używa?

Comments

Tu powinieneś dostosować format do zdjęcia. Jeden format będzie dobry dla danego zdjęcia a inny nie. Dodatkowo trzeba sobie zadać pytanie czy możesz pozwolić sobie na kompresję stratną. Najlepiej sprawdzić za pomocą prób i błędów jaki format będzie miał najmniejszy rozmiar dla danego zdjęcia.

---

Jak mam 100 zdjęć na stronie, różnego formatu od prostej grafiki do zdjęć z wieloma szczegółami- modyfikacja indywidualna każdego zdjęcia- (kolokwialnie) ryje banie (odmóżdża). Wolałbym postawić na proces automatyczny- co się sprowadza do automatyzacji zapisu na 1 określony format.

Answer 1

AVIF jest na tę chwilę najnowszym i najlepszym formatem, ale ma małe wsparcie wsród przeglądarek. WebP jest za to wspierany o wiele szerzej, oprócz Safari (ono wspiera tylko częściowo, na Big Surze).

Ogólnie to IMO najlepiej stosować picture i proponować trzy formaty: AVIF, WebP i jpg/png, względnie dwa – WebP i jpg/png:

<picture>
	<source type="image/avif" srcset="snow.avif">
	<source type="image/webp" srcset="snow.webp">

	<img alt="Hut in the snow" src="snow.jpg">
</picture>

W ten sposób wspieramy najwięcej przeglądarek i posyłamy im najlepszy możliwy format.

Comments

Dzięki za odp.
Spotkałem się z tym rozwiązaniem gdy szukałem informacji.
Z praktycznego punktu widzenia- gdy mam na stronie 100zdjęć (z nawet więcej) każde zdjęcie będę musiał zamieszczać 3x w różnych formatach. Nikt tego nie robi. Czasowo i psychicznie jest to nie do ogarnięcia.
Dodatkowo sprawdzałem możliwość wykorzystania *.WebP na b.popularnym frameworku (Joomla!)- i taki format nie jest obsługiwany przez system (chyba że wtyczka? Ale tego nie widziałem). Sprawdzałem też format "jpg 2000" ale Joomla! też ma problemy z jego wyświetlaniem.

---

Nikt tego nie robi. Czasowo i psychicznie jest to nie do ogarnięcia.

Bardzo dużo stron tak robi. Takie rzeczy po prostu się automatyzuje i system sam generuje sobie z jednego zdjęcia wszystkie potrzebne formaty albo robi to w locie. Są też zewnętrzne usługi od tego, np. Cloudinary.

---

Dodatkowo sprawdzałem możliwość wykorzystania *.WebP na b.popularnym frameworku (Joomla!)- i taki format nie jest obsługiwany przez system

Co ma CMS (nie framework) do obsługi formatu. To przeglądarki obsługują format. A  do Joomla jak najbardziej można doinstalować wtyczkę do konwersji na webp. 

---

Wkradła się nieścisłość. Sprawdzałem już znacznie wcześniej gdy chciałem pracować na formacie *.webp, ale z jakichś względów nie mogłem- więc zrezygnowałem.
Sprawdziłem teraz ponownie. Jednak można dołączyć plik *.webp przez Joomle!, ale przeglądarka Chrome/Edge/ go nie widzi. (Plik jest 5x mniejszy od zapisanego jako *.jpg)

Więc nawet jeśli istnieją jakieś wtyczki w Joomli!- nie ma sensu pracować z tym formatem. Albo czegoś nie wiem? Zostawiasz wtyczce automatyczną konwersję na *.webp? I nie zajmujesz sobie tym głowy?

I Joomla nie widzi pliku *.jpf (jpg 2000)

---

Tak wtyczka robi wszystko za Ciebie.

Answer 2

Bardzo obszerne i ciekawe artykuły na Twój temat =>

https://designpowers.com/blog/image-file-formats

https://www.freecodecamp.org/news/best-image-format-for-web-in-2019-jpeg-webp-heic-avif-41ba0c1b2789/

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Comments

Dzięki czytałem tu i tam podobne artykuły.
Chodzi mi o sytuację praktyczną. Page Speed Insights- proponuje zamienne formaty do (*.jpg, albo *.png). *.Jpg, *.jpeg *.png sa formatami uniwersalnymi-  korzystając z tej zalety zapisuję zdjęcie po indywidualnie dobranej kompresji ( i nie mogę jej zmienić na niższą)- ale wspomniany Page Speed Insights twierdzi że się da zrobić więcej, i proponuje swoje zamienniki.
I właśnie, właściwe pytanie pojawia się w tym miejscu- co z tym zrobić? Przejść na nowe, promowane WebP?

---

WebP Z tego co się orientuje ma dużo lepszą kompresję od PNG JPEG do tego oferuje renderowanie progresywne i jest dobrze obsługiwany  w przeglądarkach ..więc Twój wybór wydaję się właściwy ale wszystko zależy od kontekstu więc zrób dobry research  i do dzieła !