Что лучше? PNG vs JPG

12 3
Fourteen
На сайте с 02.11.2011
Offline
75
1959

Коллеги, вы опытные, у меня такой вопрос!

Загружаю крупную статью на сайт (20 картинок).

Все картинки - скриншоты с дорисовкой комментариев.

Разрешения примерно 800 на 800.

Что лучше выбрать?

1) загрузить качественных PNG картинок. Но будет весить 6 мегабайт.

2) загрузить чуток похуже JPG но на 3 мегабайта.

P.S. добавлю сразу - превьюшки делать не хочу,

дабы юзер читал материал не отвлекаясь

и без дополнительных кликов и всплывающих окон.

P.P.S. и дополнительный вопрос - если делать JPG, то есть ли смысл делать картинки кликабельными

с открытием в новом окне такой же PNG картинки во всю ширину окна (чтобы лучше разглядеть детали) ?

Какими МЫ их видим в будущем? (/ru/forum/984971)
DV
На сайте с 01.05.2010
Offline
644
#1
VDS хостинг ( http://clck.ru/0u97l ) Нет нерешаемых задач ( https://searchengines.guru/ru/forum/806725 ) | Перенос сайтов на Drupal 7 с любых CMS. ( https://searchengines.guru/ru/forum/531842/page6#comment_10504844 )
Fourteen
На сайте с 02.11.2011
Offline
75
#2

Спасибо, но там тема не до конца раскрыта, особенно в части дополнительного вопроса в первом топике.

Я пока склоняюсь сделать всё в JPG, так вес страницы вдвое меньше.

Но не могу определиться ставить ли кликабельность на картинки и открытие уже PNG по ним

или вообще от кликабельности картинок отказаться, как ухудшающие юзабилити в этом конкретном случае.

Химик78
На сайте с 16.10.2009
Offline
161
#3
Fourteen:
Что лучше выбрать?

1) загрузить качественных PNG картинок. Но будет весить 6 мегабайт.

2) загрузить чуток похуже JPG но на 3 мегабайта.

Лучше будет третий вариант:

3) Установить лайтбокс на сайте. В статью загрузить небольшие картинки (300 пикселей в ширину). Картинки открывать в лайтбоксе. Лучше, если лайтбокс позволяет листать картинки, и если картинки будут с подписями в лайтбоксе.

Юзерам будет удобнее, т.к. статья быстро загрузится даже на мобильном, и поисковики довольны.

proshin.ru (http://proshin.ru/services/) - аудит сайтов, продвижение, контекстная реклама и пр.
LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#4

Если просто в статьях, то превью и JPG выше крыши.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
VoV@
На сайте с 22.09.2007
Offline
196
#5
Fourteen:

1) загрузить качественных PNG картинок. Но будет весить 6 мегабайт.

2) загрузить чуток похуже JPG но на 3 мегабайта.
Химик78:
Лучше будет третий вариант:
3) Установить лайтбокс на сайте. В статью загрузить небольшие картинки (300 пикселей в ширину). Картинки открывать в лайтбоксе. Лучше, если лайтбокс позволяет листать картинки, и если картинки будут с подписями в лайтбоксе.

Юзерам будет удобнее, т.к. статья быстро загрузится даже на мобильном, и поисковики довольны.

4) Сделать "ленивую загрузку". Первую картинку загрузить сразу, а остальные подгружать javascript-ом после загрузки всех элементов: по document.addEventListener('DOMContentLoaded', function(){}); или $(document).ready(function(){}); - если jquery используется.

Fourteen:

P.P.S. и дополнительный вопрос - если делать JPG, то есть ли смысл делать картинки кликабельными с открытием в новом окне такой же PNG картинки во всю ширину окна (чтобы лучше разглядеть детали) ?

Наверное лучше на той же странице открывать, как Химик78 написал.

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
cblcg
На сайте с 28.06.2012
Offline
232
#6

если важно качество текста то однозначно PNG

попробуйте лучше сжать или используйте https://tinypng.com/ или другой сервис подобный, там алгоритмы оптимальны

S
На сайте с 02.11.2017
Offline
6
#7

Элементы интерфейса - однозначно в png, без всяких джепегов. Хотите оптимизировать загрузку, лучше настройте кэширование.

Jpg только для полноцветных изображений, где нужно фотографическое качество.

Анимация & интерактивная анимация в html5 и svg
0
На сайте с 21.11.2009
Offline
279
#8

Fourteen, согласен с cblcg, юзайте png c компрессией и будет вам счастье

G1
На сайте с 13.12.2013
Offline
29
#9

PNG качество выше

SeVlad
На сайте с 03.11.2008
Offline
1609
#10
Fourteen:
но там тема не до конца раскрыта

Раскрыта, только ты не понял.

Попробую ещё и я объяснить. Формат должен выбираться в зависимости от того, что изображено на картинке.

Если это полноцветное фото - однозначно jpg. Если это картина с квадратным блоками, линиями, етс и небольшой цвет гаммой (напр скрин этой страницы форума с включённым адблоком) - png.

Для практики бери http://www.irfanview.com/ и сохраняя картинку в разных форматах и компрессии* сам всё увидишь - какой где будет объём.

*Для фото jpg достаточно 75-85, а то и70 иногда. Для png ставь максимум.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий