Заглянул в код гугл картинок, и не вкурил что это за атрибуты =/
Где искать информацию по ним?

Это результат автоматической генерации страницы и оптимизации скорости создания объектной модели документа.
1. Парсер html документа может работать в множество потоков (обычно 4-8) в отличии от интерпретатора JS который работает только в один поток в пределах одного документа и при этом обычно монополизирует и блокирует работу с DOM . По этому создавать объекты гораздо быстрее и выгоднее через парсер html. (подробнее можно посмотреть на вкладке таймлайна в отладчике)
2. HTML это расширяемый язык это значит что у любых тегов ты можешь использовать любые атрибуты и парсер документа должен добавлять их как свойства объекта элемента DOM стандарт рекомендует использовать приставку "data-" для собственных атрибутов однако использование атрибутов без этой приставки не является ошибкой.
Так же можно придумывать и использовать любые теги.
data-атрибуты специально предусмотрены для хранения какой-то информации, связанной с конкретными HTML-элементами... чтобы потом использовать её из JS. Их можно назвать как угодно.
data атрибут создаёт сам программист. Обязательно data и потом подходящее по смыслу. Например можно создать несколько блоков с ценой к товару с атрибутом data-price. Когда пользователь выбирает товар, то с помощью этого атрибута можно посчитать на какую сумму он там выбрал товаров. PS Я так это понимаю. Только учусь
Обфускация (от лат. obfuscare, "затенять, затемнять") - запутывание кода программы, то есть приведение исходного текста к виду, сохраняющему функциональность программы, но затрудняющему анализ, понимание алгоритмов работы и модификацию.
Невозможно запретить просмотр кода, написанного на скриптовом языке типа JS или разметки HTML/CSS. Но можно добавить геморроя людям, занимающимся реверс-инженерией.