На первую VAKANSII.com.ua
   На первую VAKANSII.com.ua  На первую VAKANSII.com.ua
СЕГОДНЯ НА САЙТЕ:  162 ВАКАНСИЙ. НОВЫХ - 19 Интернет
  47262 РЕЗЮМЕ. НОВЫХ - 14 Если не работает
 Сайт газеты

  • Страхования
  • Фехтование
  • Инвестирование
  • ПротивоГАЗы
  • Как авто
  • Респираторы
  • Средства пожаротушения
  • Новости
  •  

    Статьи

    Как оптимизировать изображения для Интернета

    1. Зачем оптимизировать изображения для Интернета? Стандартный пример: разумно оптимизированный веб-сайт облегчает поисковым системам правильную индексацию своего контента. Текст не является препятствием, изображения в основном делают это. Сканер может (все еще) не читать и не интерпретировать изображения. Поэтому, если вы позаботитесь о том, чтобы ваше изображение можно было интерпретировать по-разному, каждый сканер будет в восторге. Звучит хорошо, правда? Есть еще больше рычагов, которые вы можете использовать, чтобы получить максимальную отдачу от изображений и графики вашего сайта. Итак, приступим к делу: Дайте картинке осмысленное название
    2. Дайте изображению атрибут alt
    3. Установить описательный заголовок
    4. Используйте соответствующее имя файла
    5. Обратите внимание на размер файла
    6. Используйте правильный формат файла
    7. Снизить качество
    8. EXIF и метатеги не нужны человеку
    9. Используйте иконки как шрифты, а не как графику
    10. Используйте элемент изображения с умом
    11. Мое личное мнение:

    Зачем оптимизировать изображения для Интернета?

    Стандартный пример: разумно оптимизированный веб-сайт облегчает поисковым системам правильную индексацию своего контента. Текст не является препятствием, изображения в основном делают это. Сканер может (все еще) не читать и не интерпретировать изображения. Поэтому, если вы позаботитесь о том, чтобы ваше изображение можно было интерпретировать по-разному, каждый сканер будет в восторге. Звучит хорошо, правда?

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

    Дайте картинке осмысленное название

    Да, вы можете видеть, что показано на картинке. И да, нам все еще нужен заголовок, который отражает это. Прежде всего, это не плюс для вашего аккаунта SEO, а преимущество для ваших посетителей. Если он наведет указатель мыши на картинку, это описание станет видимым.

    Кстати, вы можете добавить ключевые слова в это описание, которые важны для вашего SEO.

    Дайте изображению атрибут alt

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

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

    Но для зрячих посетителей также помогает атрибут alt. А именно, если картинка не была загружена. В этом случае он помогает в виде заполнителя преодолеть пропущенный опыт.

    Установить описательный заголовок

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

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

    Для большинства CMS это довольно легко сделать. Вот в примере: WordPress. Вы можете легко добавить заголовок, заголовок и атрибут alt:

    Используйте соответствующее имя файла

    Сам файл изображения должен иметь имя файла, содержащее ключевые слова, относящиеся к вашей статье. Поэтому, если ваше изображение 20151010-DSC1011.jpg, измените имя на то, что отражает содержание. Имейте в виду, какие условия поиска вы бы использовали, чтобы найти изображение. Почему? Если поисковые запросы и имя файла совпадают, скорее всего, ваше изображение появится в Поиске картинок Google.

    Обратите внимание на размер файла

    Этот момент очень важен. Потому что, если вы используете очень большие файлы изображений, произойдут две вещи:

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

    Второе - и это действительно неудобно - это отрицательно сказывается на вашем технический SEO ,

    Еще раз для безопасности: я имею в виду не размер, а размер файла, но размер файла в килобайтах. Размеры изображения не должны превышать максимальный размер, в котором они используются на веб-сайте. Таким образом, если изображение отображается на настольной версии веб-сайта с разрешением 1000x1000 пикселей, но только на смартфоне с разрешением 320x320 пикселей, оно должно иметь максимальный размер 1000x1000 пикселей. Если он больше, он тратит впустую пространство и удлиняет время загрузки. Если оно меньше, оно в максимальной степени отражается на неприглядных потерях качества.

    Этот метод всегда имеет подвох. Каждое изображение загружается в полном размере, даже если оно меньше. Адаптивный дизайн или нет. С такими инструментами, как imgix Вы можете помочь здесь? Это позволит разместить ваши изображения на сервере и использовать их по мере необходимости в зависимости от размера области просмотра. Это экономит место и делает ваш сайт быстрее.

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

    Существует только ограниченное количество соответствующих форматов для отображения изображений на веб-сайтах: .gif, .jpg и .png.

    И вот как вы используете это оптимально:

    • .jpg для фоновой графики и фотографий
    • .png или .gif для макета графики

    Снизить качество

    Это звучит парадоксально, но это помогает. Конечно, это не сделано, что это выделяется. Я говорю о снижении до 80%. Это стандартно для файлов .jpg в любом подходящем инструменте для редактирования изображений и обычно запрашивается при сохранении. Это экономит место и обеспечивает более короткое время загрузки. Обстоятельство, которое, кстати, Google ценит.

    Инструменты, которые делают эту работу для вас, например, kraken.io или PNGGauntlet ,

    EXIF и метатеги не нужны человеку

    Фотографии обычно снабжаются дополнительной информацией, такой как EXIF ​​и метатеги. Эта информация будет занимать место для хранения и не даст никакой выгоды при использовании на вашем веб-сайте. Так что ты делаешь? Довольно просто: покончим с этим.

    Вы можете сделать это tinypng использовать.

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

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

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

    Используйте элемент изображения с умом

    Элемент изображения HTML5 далеко не поддерживается всеми браузерами. В старых версиях Firefox, Chrome и Safari такая же проблема, как и в Internet Explorer. Поэтому следует тщательно продумать, имеет ли смысл его использование. В противном случае вы можете заблокировать важных посетителей / клиентов.

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

    Мое личное мнение:

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

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

    Новости

    Хороший туристический ресурс

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

    Когда мы с мужем отправляемся куда-то далеко на машине, я люблю посмотреть фильм на телефоне. Для этого недавно приобрела

    Где купить переходник на объектив

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

    Сервисный центр эпл
    Ожидается, что в следующем месяце Apple выпустит новые модели iPhone, а несколько слухов и даже код iOS 12 предполагают, что компания планирует внедрить функции двойной SIM-карты в некоторых вариантах.

    Аренда автомобиля
    Как осуществляется аренда автомобиля у ИП, налогообложение при таком виде деятельности? Эти вопросы сейчас интересуют многих людей. Отправляясь в путешествие в другую страну или город, возникает потребность

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

    Сервис apple
    Владельцы современных электронных мобильных устройств бренда Apple прекрасно осведомлены о том, что несмотря на надежность и высокую технологичность их техники, она также подвергается износу и может

    Перейти по ссылке
    Критерием оценки работы сотрудников становится такое действие, которое работник должен совершать в рамках выперейти по ссылкелнения своих обязанностей и которое мы можем проверить. В каждом подразделении

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

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

    www.natali.ua www.buhgalteria.com.ua www.blitz-press.com.ua  | www.blitz-price.com.ua  | www.blitz-tour.com.ua
     
    Rambler's Top100
     письмо веб-мастеру
    Copyright c 2000, Блиц-Информ