Блог

Мне интересно, считается ли плохой практикой изменять размер логотипа или любого изображения с помощью CSS или мне следует сделать это с помощью программы для обработки изображений, прежде чем размещать его на сайте?

Я бы рекомендовал вам использовать webp или svg, если это возможно. В противном случае, чем легче файл, тем быстрее он загружается, что повлияет на производительность сайта и, следовательно, на ваш показатель скорости, что повлияет на ваше позиционирование в Google. (проверьте https://developers.google.com/speed/pagespeed/insights/ для получения дополнительной информации) Итак, вкратце: вы должны изменить размер с помощью photoshop, а затем изменить размер с помощью css, чтобы адаптировать его к редактированию экрана: Используйте как можно меньший размер без потери качества в 4k и измените размер с помощью svg.

если вы используете формат .png или .jpg, размер лучше удвоить, как показано на веб-странице, например: логотип, отображаемый на веб-странице, составляет 200×60 пикселей, затем в Photoshop измените размер логотипа до 400×120 пикселей, затем сохраните как .png или .jpg. Вы делаете это для четкого и четкого отображения логотипа на экране retina.

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

Можно изменить размер логотипа с «Большого на маленький», чтобы пользователь не мог видеть пиксельные изображения, такие как изображение размером 50×50 пикселей, до 150×150 пикселей.

Лучший вариант для логотипов-использовать .svg (векторы), где вы можете задать адаптивный размер, например, с помощью css или html:

 <img src="mylogo.svg" width="6rem"> or
<img src="mylogo.svg" style="width: 6rem;">
 

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