Как изменить размер логотипа на тильде

Полный гайд по работе с изображениями для сайта — 11 советов по работе с картинками в Тильде

Сегодня поговорим на интересную тему, которой редко интересуются, но часто сталкиваются с ней на практике. Как правило, многие не знают, как словами описать свою проблему, потому что не знают самых базовых основ при работе с картинками.

Именно поэтому мы начнем не с ответа на вопрос про форматы и размеры, а с основных характеристик картинок/изображений для сайта. Многие путают базовые понятия и в итоге получают не верный ответ.

Советую пробежаться по ним, даже если вы уже давно в веб-дизайне, обновить в памяти.

Свойства картинок, основные характеристики фото и изображений для сайтов

Очень часто многие базовые характеристики картинок/изображений, таких как вес, разрешение путают с размером. Поэтому начнем именно с него.

1. Размер фото, картинки и/или изображения для сайта

Наиболее близкое и доступное для понимания нам понятие.

Что такое размер изображения?

Размер изображения – это ни что иное, как соотношение ее сторон в сантиметрах/миллиметрах. Т.е. ширина и высота картинки/изображения.

Но чаще всего размер измеряют в px – пикселях, что является не совсем верным решением, так как пиксели отвечают за такую характеристику, как разрешение картинки, а она в свою очередь отвечает за качество, а не за соотношение сторон по размеру. Но так как и размер, и разрешение имеют такие характеристики как высота и ширина происходит путаница.

Важно это понимать, но пользоваться можно вторым вариантам, результат будет по отношению к рабочему полю одинаковый.

На что влияет размер изображений?

При работе с размером изображения на сайте, размер влияет на то, как картинка будет смотреться в рабочем поле (влезет целиком или обрежется). Именно поэтому заранее важно знать размеры рабочего поля, в которое вы планируете вставить картинку/фото на сайте.

Как узнать рамер рабочего поля изображения и размер картинки?

Для определения размера рабочего поля вы можете использовать онлайн рулетку/линейку – например, установить расширение гугл Хром  Page Ruler Redux https://chrome.google.com/webstore/detail/page-ruler redux/giejhjebcalaheckengmchjekofhhmal/related?hl=ru&

С помощью данной линейки измеряете на сайте то рабочее поле, которое вам необходимо для работы в данный момент. Получаете его размеры

После этого идете в сервис где вы берете фотографии и по данным размерам ищите подходящую картинку/изображение/фотографию

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

Например, нам необходимо вставить фотографии в рабочее поле с размером 361х269

Далее мы идем, например, в яндекс картинки искать картинку с размером 361х269 или просим у Заказчика картинку с таким размером

Рассмотрим пример Яндекса, вводим в поисковую строчку название той картинки, которую мы хотим получить, например, «Цветы», а затем в строку с инструментами вводим размер фотографии, который нам нужен. В итоге получаем подборку фотографий исключительно с нужным нам размером.

Такая фотография прекрасно впишется в наше рабочее поле

И для примера давайте возьмем фотографию с большим размером, например , изменим размер одной стороны на 578. Также ставим в наше рабочее поле и увидим, что первая картинка встала идеально, а у второй края обрезались

Размер картинки мы также можем узнать с помощью инструмента линейка, ссылка на него выше

Используем инструмент линейка по алгоритму указанному выше

Как изменить размер фотографии/картинки

Изменить размер без знаний фотошопа можно в онлайн программах, я делаю это здесь https://www.imgonline.com.ua/resize-image-centimeters.php

Какие размеры картинок самые оптимальные для сайта

Размеры фото и картинок для сайта

Для сайтов используются несколько видов соотношений сторон: самые распространенные высокий (4:3), простой (3:2), низкий (16:9) — а также квадрат (1:1).

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

Возьмем соотношение сторон 16:9. Вопрос — сколько это будет в мм, какой размер фото нужно взять?

Ответ — все зависит от ситуации. Если вы хотите видеть на сайте 4 карточки товара в ряд в соотношении сторон 16:9, то размеры картинок вам понадобиться меньшие, чем если вы решите использовать 3 карточки товара в ряд, см пример на фото ниже

С 3 карточками размер фотографий будет больше

Если нужен конвертер пикселей в мм можно найти здесь https://www.translatorscafe.com/unit-converter/ru-RU/typography/7-4/pixel%20(X)-millimeter/

2. Разрешение изображения что это и в чем измеряется

Что такое разрешение изображения и DPI?

Иногда разрешение изображения называют DPI (количество точек на дюйм), но чаще просто размером, что не верно, об этом я написала выше

Разрешение картинки/изображения/фотографии – это плотность (количество) рх (пикселей) на единицу площади по высоте и ширине

Именно поэтому путают данные понятия, ищут картинку по размеру, а вбивают пиксели

Что такое пиксель на сайте?

Пиксель – это крошечный квадратик, отвечающий за детальность фотографии и ее качество. Чем больше пикселей в картинке, тем она более четка, качественная и имеет много мелких деталей

Увидеть пиксели можно, если сильно  увеличить любую из картинок, например в пейнте

На что влияет разрешение изображения?

Разрешение картинки, как было сказано выше, влияет на качество отображения ее на сайте.  Поэтому на первый взгляд кажется, что чем с большим разрешением возьму фото, тем лучше. Но не так все просто.

Например, стандартное фото хорошего качества в формате JPEG может иметь разрешение 4200х2800 px пикселей ширины и высоты. Стандартное же разрешение монитора тоже считается в пикселях. Самые популярные размеры — это 1366×768, 1920×1080, 1440х900.

Теперь, если сопоставить разрешение монитора 1366×768 и размер картинки 4200х2800, то становится очевидным, что она более чем в 2 раза шире самого монитора, а значит браузер будет сжимать картинку до нужных ему размеров, а в результате этого появятся ползунки или картинка вылезет за размеры рабочих полей (монитора)

Что же делать? Первое, что приходит на ум — уменьшить разрешение. Но тут главное знать до каких размеров. Так как если вы уменьшите разрешение картинки больше, чем вам нужно, то при таком уменьшении программа уничтожит часть пикселей, картинка станет миниатюрной, а при растягивании до необходимых вам размеров она приобретет мутность, так как не будет хватать пикселей для нормального ее отображения.

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

Отличие разрешения от размера заключается именно в том, что размер фотографии/изображения/картинки мы можем изменить, как нам угодно, а если будем менять разрешение не изменяя размер фотографии, то качество может сильно ухудшиться. Т.е. разрешение имеет неразрывную связь с размером фотографии, поэтому зачастую и ищут фото/картинки/изображения по пикселям, а не см/мм, чтобы потом не заниматься подгонкой.

Как узнать разрешение фото, картинки или изображения?

Первый вариант

Даный вариант подойдет, если фотография/картинка есть у вас прямо на рабочем столе в компьютере, т.е. скачена к вам на компьютер

Наводим мышку на фото, нажимаем правую кнопку, выбираем вкладку «Свойства», всплывает информационное окно, где необходимо выбрать вкладку «Подробно»

Второй вариант

Если изображение скачивать на компьютер нет желания, вам подойдет второй вариант, разрешение можно узнать прямо на сайте, где вы видите интересующую вас картинку

Наводим мышку на фотографию, нажимаем правую кнопку мыши, выбираем вкладку «Посмотреть код» (в браузере Хром эта вкладка называется так, в других может называться иначе), далее наводим мышку на ссылку с фотографией, появляется всплывающее окно, где мы увидим разрешение фотографии, загруженной на данный сайт

Как подобрать правильное разрешение

Точно также, как и с размер – работаем рулеткой/линейкой измеряя заранее рабочее поле. Далее ищем подходящее по размеру и разрешению фото.

Да и еще есть маленький лайфхак, берите изначально фото/картинки/изображения с высоким разрешением, даже если оно сожмется (а такая функция у многих браузеров, программ, например у фейсбука – автоматическая), то в качестве вы потеряете не сильно.

Как изменить разрешение картинки без фотошопа

Изменить разрешение без знаний фотошопа можно в онлайн программах, я делаю это здесь

https://www.imgonline.com.ua/resize-image.php

Вес картинки для сайта

Еще одно понятие, которое также часто путают с размером, просто потому что так удобно

Что такое вес картинки?

Вес картинки/изображения – это тяжесть файла (изображения/картинки/фото), т.е. на сколько тяжелой будет картинка, если условно ее держать в руке или взвесить на весах.

Измеряется вес не в кг, как мы привыкли, а в мире интернета, он измеряется в Кб (килобайтах), Мб (мегабайтах), Гб (гигобайтах)

1 мегабайт = 1024 килобайт.

Вес тесно взаимосвязан с разрешением, если мы уменьшаем разрешение, т.е. качество картинки, то следом и автоматически уменьшается вес картинки и она быстрее загружается на сайт

На что влияет вес изображения на сайте

Данная характеристика картинки влияет на скорость ее загрузки на компьютере, чем вес больше, тем картинка тяжелее и дольше загружается. Следовательно и сайт с тяжелыми картинками будет грузиться (открываться) дольше, что обязательно скажется на показателях конверсии и поведенческих факторах. А следовательно сайт потеряет в деньгах или в сео позициях.

Как работать с весом изображения перед тем как загрузить его на сайт или оптимизация картинок для сайта?

Перед тем, как загрузить фото/картинку/изображение на сайт обязательно нужно уменьшить его вес.

Почему?

Потому что

• Во-первых, страничка сайта с такими картинками будет быстрее грузиться
• Во-вторых, вы сэкономите объем памяти вашего хостинга. Любой хостинг имеет определенный объем, как флешка, есть флешки на 1 гб, есть на 2гб и т.п. Вот если вы будете грузить картинки с большим весом, то вы очень быстро достигните мах, т.е. у вас, говоря простыми словами, закончится место на флешке/хостинге и вы не сможете больше пополнять ваш сайт фотками. Если вы работаете на конструкторе, то не сможете, если работаете на другой платформе, то придется докупить место.

От чего зависит вес изображения

• Во-первых, от разрешения изображения (того, что пикселями измеряется): файл с расширением  7360×4912 px всегда будет весить больше, чем он же уменьшенный до 150 рх
• Во-вторых, от формата изображения (JPG, TIFF, RAW), о чём читайте ниже.
• В-третьих, вес изображения зависит от количества деталей на фотографии: чем их больше и чем они меньше, тем «тяжелее» изображение

Как уменьшить вес фотографии

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

В ней вы без проблем уменьшите вес фотографии в разы бесплатно, если у вас не более 20 фотографий и они изначально не весят более 5 мв. 20 фото не предел, просто придется загружать по очереди, обновите страничку и грузите еще 20, а вот размер это предел платной версии, но обычно такие большие картинки встречаются редко.

Самый быстрый, но не лучший метод уменьшить вес большой картинки — сделать ее скриншот. Но это экспресс вариант, так как при нем порой значительно теряется качество.

Как узнать вес картинки

Первый вариант

Наводим мышку на фото, нажимаем правую кнопку, выбираем вкладку «Свойства», всплывает информационное окно, где необходимо выбрать вкладку «Общие»

Второй вариант

Наводим мышку на фотографию, нажимаем правую кнопку мыши, выбираем вкладку «Посмотреть код», далее наводим мышку на ссылку с фотографией, появляется всплывающее окно, где мы увидим вес фотографии, загруженной на данный сайт

Самые оптимальный вес изображений для сайтов

Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.

Форматы фото и изображений для сайтов

Иногда формат называют типом файла или форматом файла

Что такое формат файла или изображения?

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

Формат фото JPG

Самый распространённый формат изображения —  JPG. Его «понимают» все компьютеры и программы для просмотра изображений. Данный формат готов к использованию сразу после создания фотографии, он не требует доработки и редактирования и сжат в определенном допустимом формате, т.е. имеет оптимальное для работы разрешение и вес

Чаще всего именно с ним мы работаем при создании сайтов

Какие еще форматы интересны для сайтостроителей и где их применять?

Формат изображения без фона или что такое PNG формат и для чего он нужен

ПНГ (png формат) – интересен тем, что картинки в данном формате не имеют фона, никакого, даже белого, т.е. они находятся на прозрачном фоне и следовательно их без проблем можно накладывать на другие изображения, объединяя и делая из них что-то новое. Но данный формат имеет огромный минус, например, когда мы растягиваем его на сайте до нужного нам размера он сильно теряет в качестве, т.е. он низкого разрешения

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

Векторный формат изображения или svg формат

Формат свг (svg) – он не имеет подобного минуса и легко видоизменяется без потери качества путем простого растягивания прямо на сайте, также он удобен при работе в редакторах (фотошоп, фигма и т.п.), так как его легко видоизменять, например, поменять цвет или убрать какой-либо элемент.

Также плюс данного формата, что картинки в нем очень мало весят.

Векторный и графический форматы — что это и в чем разница?

Формат свг  еще называют векторным, а пнг формат графическим (растровым).

Разница между векторным и графическим форматом в том, что они различаются в способе создания.

Изображение в векторном формате строится с помощью математических формул (точки, линии, кривые Безье).

Изображение в растровом виде представляет собой прямоугольную матрицу, состоящую из множества точек (пикселей).

Векторные файлы понимают не каждые программы, для них нужны специальные просмотрщики, я пользуюсь SVG File Viewer, его необходимо скачать установить и тогда на компьютере вы будете видеть файлы свг, как картинки, а не белые прямоугольники с вопросами.

Растровую графику редактируют и создают с помощью растровых графических редакторов (Adobe Photoshop, Corel Painter, бесплатный Gimp и другие). Также растровая графика создается фотоаппаратами, сканерами.

Векторная графика делается векторными редакторами (CorelDraw, Adobe Illustrator, Inkscape).

Что такое формат WebP и почему о нем важно знать, тем кто работает с Тильдой

Еще один интересный формат для тех, кто работает с Тильдой — WebP — формат нового поколения.

Тильда автоматически конвертирует все картинки на сайте в WebP — формат, который позволяет сжимать изображение до 35% сильнее (уменьшить вес изображения в 3 раза), чем JPEG, без потери качества. Загружать изображения на сайт в новом формате не нужно, система всё сделает за вас.

Но это не значит, что тем кто работает с Тильдой можно отказатся от оптимизации изображений перед загрузкой на сайт. Я соответую это делать, так как еше далеко не все браузеры поддерживают новый формат и в таком случаи Тильда показывает им фото в старом всем известном JPG формате.

Как узнать формат изображения/фотографии

Наводим мышку на фото, нажимаем правую кнопку, выбираем вкладку «Свойства», всплывает информационное окно, где необходимо выбрать вкладку «Общие», там будет указан тип файла

На что влияет формат файла и зачем его нужно учитывать при создани сайта

Помнить о формате, как мы выяснили выше, необходимо чтобы не ухудшить качество картинки и подобрать верный вид ее использования

Приемы, которые можно использовать при работе с картинками в Тильде

Так как я чаще работаю с картинками в Тильде, дам ряд советов по работе  с ними:

• не забываем подбирать картинки по размеру, под рабочее поле на сайте (соотношение сторон)

• использовать центрирование картинки в настройках, иногда оно помогает поставить часть большой картинки в нужном ракурсе, если она изначально не помешается в рабочее поле

• подгонять фотографии с помощью встроенного в Тильду редактора

• смотреть на рекомендуемые Тильдой размеры

• использовать встроенную функцию в настройках Тильды «Соотношение сторон» или «Оригинальное соотношение сторон», если вы заранее подогнали фотографии под единый размер

• выбирать стандартные блоки для работы , имеющие гибкие настройки, а в зеро пользоваться шейпами, а не image, у шейпов возможно видоизменять стороны, а у имейдж нет, в имейдж стороны зависят от самой фотографии и как бы вы не растягивали имейдж он все равно будет принимать соотношение сторон фотографии, лишь уменьшаясь или увеличиваясь в размерах

• использовать функцию масштабирования изображения, например «Оригинальный размер»

• использовать инструмент в настройках блока «Высота» изображения

• регулировать размер количеством картинок в ряду

• использовать фотошоп, фигму, фотосессии и делать картинки под себя, т.е. с нужными размерами и разрешениями
• перед загрузкой на Тильду фотографии большого размера сократите ее, как минимум до 1680 px по большей стороне.

Так как все фотографии большого размера при загрузке на Тильду автоматически уменьшаются до 1680 px по большей стороне. Фотографии меньше 1680 px сохраняют оригинальный размер.

Так как фотография уменьшается программным методом, качество фото ухудшается, а вес оптимизируется недостаточно хорошо.

Краткий чек-лист по работе с картинками в Тильде

Авторское видео «Работа с картинками»

Доступ к видео — 200 руб или бесплатно если напишите комментарий под статьей по делу, а не пару строк не пойми о чем, мне важно ваше мнение

Если оплачиваете доступ, то плюсом получаете возможность задать вопрос по данной теме лично мне

Нажимая на кнопку «Получить» вы соглашаетесь с политикой конфиденциальности размещенной на данном сайте в подвале

Ну а если вам лень разбираться со всем этим или все равно трудно, вы всегда можете обратиться ко мне за консультацией, заполнив форму ниже или просто позвонив по телефону

8-926-543-35-40

Помимо консультаций я также могу предложить вам пройти обучение у меня

Или создать сайт под ваши задачи

[sendpulse-form id=»838″]

Понравилась статья — поделитесь с друзьями или оставьте свой комментарий ниже

(Посетители 1 348 times, 5 visits today)