ankly

учите матчасть: data-атрибуты сторятся НЕ в элементе.

Все что ты видишь в браузере уже лежит у тебя на компе остается только это достать ! Достаешь из js 2 картинки и соединяешь их в фотошопе. или Делаешь расширение оно у тебя из js забирает переменные с 2 снимками и делает из них одну картинку =).
А так делай привью (маленькое изображение плохого качества и выкладывай его ) как это сднлано на платных фотостоках .
Как вариант попробуй сделать так при нажатии клавиши принскрин закрывай картинку черным дивом на 1 с или меньше мб поможет . А то лишний раз нагружать клиент это не круто .

P.s решений этого много но человек знающий веб все равно получит эту картинку если он ее видит . Есть сайт с шрифтами там шрифты стоят от 1$ до $150 мб больше . Их можно вытащить через F12 бесплатно =). Это так для примера !
------------------------------------------------------
Вот смотрю люди предлагают разные решения но как сказали это ворота по среди поля =) . Знающий человек все ровно достанет это да запрети ему все он достанет ее из оперативы =) . Если данные попали на комп то их уже не защитить !
Ставьте условия на прин скрин и при нажатие добавляйте к картинке дисплей ноне ! или Делайте привью .
О стольные решения приведут к нагрузке на машину пользователя и усложнению юзабилити сайта .
Появилась еще идея при нажатии f12 бить ссылку на картинку =) как варик если кто то захочет отключить js в браузере прямо у вас на сайте =)

Элементарно - с помощью псевдоэлементов. Полукруг - это бордер половины блока с border-radius: 50%, ну а линия - это линия. Дальше с помощью медиазапросов корректировать под нужные разрешения.

Шел 2016 год, дизайнеры продолжали издеваться над верстальщиками.
chikuyonok.ru/2010/01/uniform-text-background

Как верстать сайты быстрее, чем их рисуют
https://www.youtube.com/watch?v=tdRuZfZW99A

1) Wireframe.cc: пожалуй, самый простой сервис, находка для быстрых набросков
https://wireframe.cc/

2) Balsamiq: простой и интуитивно понятный ресурс
balsamiq.com

3) Axure: идеальный ресурс для проектировщиков и менеджеров
www.axure.com

4) Invision: мощный онлайн-сервис, с огромным набором дополнительных функций
www.invisionapp.com

5) POP: приложение, бумага и карандаш - это все, что вам требуется для создания интерактивного прототипа
https://popapp.in/

6) Moqups: Помимо прототипов можно создавать карты сайта, диаграммы и многое другое
https://moqups.com/

7) Mockflow: удобный инструмент, с неперегруженным функционалом
www.mockflow.com

8) Proto.io: незаменим для проектирования интерактивных прототипов приложений
https://proto.io/

9) UXPin: полезный и интересный сервис для профессионалов
www.uxpin.com

10) Omni Graffle: излюбленный сервис для приверженцев iOS
www.omnigroup.com/omniGraffle

У меня несколько ООО. Но свое ИП я открыл только недавно.
Я был шокирован тем, насколько это быстро и просто)))

Более того, сейчас уже не надо даже обращаться к сторонним компаниям, чтобы они помогли зарегистрировать юр. лицо. Это просто НЕ НУЖНО.

Итак, вот какой инструментарий я бы порекомендовал:

1. Регистрация ИП:
- https://service.nalog.ru/gosreg/
- www.e-kontur.ru/ip

Порядок действий

• Составляем форму самостоятельно (быстро, удобно, бесплатно)
  
• Формируем квитанцию для оплаты гос. пошлины (по-моему 500 руб.)
  
• Оплачиваем квитанцию
  
• Приходим в налоговую и просто подаем документы на регистрацию
  
• Через 5 рабочих дней забираем там же все документы
  
• Подаем заявление на переход на УСН (если нужно)
  

2. Открытие счёта в банке.
Я рекомендую банк Точка (человеческий сервис, удобный интернет-банк, все круто и недорого).
Здесь все очень просто. Оставляем заявку, присылаем сканы документов. Встречаемся с менеджером или по скайпу и все работает

3. Бухгалтерия
Сервис Эльба от Контура. 1 год для новых юр лиц - БЕСПЛАТНО. Удобно, внятно, бесплатно.

Тонкости
- Нужно подготовить документы? - Фреш Док
- Не забывать про то, что ИП должны платить взносы в ПФР и ФСС за себя

Будущее
Как только бизнес вырастет - лучше зарегистрировать ООО

Успехов!

Прошел через все стадии создания web-проектов начиная с копирайтинга, заканчивая back-end и настройку серверов. В итоге остановился на front-end + чуть-чуть дизайн (но это не значит, что плохо знаю фотошоп))).

Что мне было делать лень, как дизайнеру:
1. Прикладывать файлы со шрифтами
2. Архивировать работу
3. Писать комментарии к дизайну
4. Присылать исходники иконок (если используется пак)
5. Рисовать :hover :active :focus и тп для элементов, которые это 100% требуют
6. Общаться с тугим верстальщиком, который не может отличить iline от inline-block
7. Корректировать работу, если это просит верстальщик

Что я понял, когда перешел на другую сторону:
1. Я хочу архив с адекватными шрифтами (идеал - ссылку на шрифт в goolge fonts или подобном сервисе, где есть сразу все форматы шрифтов)
2. Я хочу хотя бы .zip потому что инет в России не всегда и везде качественный и я могу быть не дома, когда хочу скачать и посмотреть диз, а он весит 300мб
3. Я хочу несколько .psd если лендос/сайт большой (экранов в 25-30 или больше). Разбивайте на 7-10 экранов максимум каждый .psd потому что не у всех верстал 8-16 гигов оперативки
4. Я хочу состояния :hover :active (пожалуйста!!! пусть уж без :focus, сам его придумаю)
5. Я хочу ссылку на пак с иконками, если они использовались в дизайне
6. Я хочу комментарии пусть даже в .txt если там что-то из-под чего-то должно выезжать при наведении/клике и тп
7. Я хочу группы в макете с адекватными названиями, а не сплошняком все слои и/или группы "Группа 1 и тп"
8. Я хочу минимум скрытых слоёв/групп в шаблоне (если группа не может донести суть - писать в .txt для чего она)
9. Я хочу каждую часть текста по отдельности, а не заголовок (60px желтый отступ от абзаца с помощью межстрочного интервала) вместе с абзацем (18px белый с межстрочным интервалом не равным заголовку). Хочу чтоб был отдельно абзац и отдельно заголовок (подзаголовок, без разницы как называть)
10. Я хочу отдельно каждую картинку, а не слитый воедино фон шапки с изображением товара/курса/др.
11. Я хочу большой векторный логотип отдельно от шаблона
12. Я хочу прозрачность, чтоб сделать png, а не "Режим наложения"->"Умножение" (обязательно адекватно мягко по контуру вырезанный объект, а не ступенька из пикселей)
13. Я хочу общаться с дизайнером, если у меня есть его контакт
14. Я хочу мобильную версию, если она должна быть у сайта
15. Я хочу бесшовную текстуру отдельно от документа, если есть фон, который имеет свойство повторяться (его в "Наложение узора" обычно ставят в стилях слоя)
16. Я хочу скайп дизайнера в макете чтоб связаться с ним))) Главное нарисуйте так, чтоб его не принять за элемент сайта и не заверстать случайно

Ну как-то так. Думаю список можно ещё пополнить, но уже о некотором сказали.

P.S. Я не эгоист, уже давно сам придерживаюсь всех этих правил, если хотят, чтоб дизайном занимался именно я.

Советую прочитать