Аспро
Интернет-магазины
  • Аспро: Максимум
  • Аспро: Next
  • Аспро: Оптимус
  • Аспро: Маркет
  • Аспро: Шины и диски 2.0
Корпоративные сайты
  • Аспро: Корпоративный сайт 2.0
  • Аспро: Приорити – Корпоративный сайт
  • Аспро: Корпоративный сайт современной компании
  • Аспро: Ландшафт – благоустройство и проектирование
  • Аспро: Digital-компания
  • Аспро: Медицинский центр 2.0
  • Аспро: Стройка - сайт строительной компании
  • Аспро: Курорт - сайт базы отдыха, санатория, гостиницы
  • Аспро: Корпоративный сайт
  • Аспро: Корпорация
Магазин
  • Аспро: Готовые сайты
  • 1С-Битрикс: Управление сайтом
  • 1С-Битрикс24: Корпоративный портал
  • 1С-Битрикс: Мобильное приложение
  • Решения от наших партнеров
Услуги
  • Создание сайтов
  • Поддержка и развитие
  • Реклама и продвижение
  • Битрикс24
  • Миграции
  • Обучение
Портфолио
  • Интернет-магазины
  • Корпоративные сайты
  • Битрикс24
  • Другое
Блог
  • Статьи
  • Обновления
  • Акции и скидки
  • Новости
  • События
  • CRM для бизнеса
Поддержка
  • Оставить заявку
  • Документация
  • База знаний
  • FAQ
Партнерам
Компания
  • О нас
  • Вакансии
  • Клиенты
  • Сотрудники
  • Партнеры
  • Документы
  • Контакты
Ещё
    Задать вопрос
    Личный кабинет
    Корзина0
    Заказать звонок
    info@aspro.ru
    454031, г. Челябинск, ул. Молодогвардейцев, 31, оф. 801
    • Вконтакте
    • Facebook
    • Instagram
    • Telegram
    • YouTube
    Аспро
    Готовые интернет-магазины
    и сайты на 1С-Битрикс
    Заказать звонок
    Личный кабинет
    Интернет-магазины
    • Аспро: Максимум
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Маркет
    • Аспро: Шины и диски 2.0
    Корпоративные сайты
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Приорити – Корпоративный сайт
    • Аспро: Корпоративный сайт современной компании
    • Аспро: Ландшафт – благоустройство и проектирование
    • Аспро: Digital-компания
    • Аспро: Медицинский центр 2.0
    • Аспро: Стройка - сайт строительной компании
    • Аспро: Курорт - сайт базы отдыха, санатория, гостиницы
    • Аспро: Корпоративный сайт
    • Аспро: Корпорация
    Магазин
    • Аспро: Готовые сайты
    • 1С-Битрикс: Управление сайтом
    • 1С-Битрикс24: Корпоративный портал
    • 1С-Битрикс: Мобильное приложение
    • Решения от наших партнеров
    Услуги
    • Создание сайтов
      • Интернет-магазины —
      • Корпоративные сайты
    • Поддержка и развитие
      • Подключение онлайн-касс —
      • Ускорение сайтов —
      • Техническая поддержка
    • Реклама и продвижение
      • Оптимизация сайтов —
      • Контекстная реклама —
      • SEO для интернет-магазинов —
      • Продвижение сайтов
    • Битрикс24
      • Переход на 1С-Битрикс24: Интернет-магазин + CRM —
      • Разработка приложений для Битрикс24 —
      • Внедрение Битрикс24 —
      • Создание лендинга на Битрикс24
    • Миграции
      • Миграция на «Аспро: Максимум» —
      • Миграция на «Аспро: Шины и диски 2.0» —
      • Миграция на «Аспро: Next»
    • Обучение
      • Курс "Мастер Аспро"
    Портфолио
    • Интернет-магазины
    • Корпоративные сайты
    • Битрикс24
    • Другое
    Блог
    • Статьи
    • Обновления
    • Акции и скидки
    • Новости
    • События
    • CRM для бизнеса
    Поддержка
    • Оставить заявку
    • Документация
    • База знаний
    • FAQ
    Партнерам
    Компания
    • О нас
    • Вакансии
    • Клиенты
    • Сотрудники
    • Партнеры
    • Документы
    • Контакты
      Аспро
      Интернет-магазины
      • Аспро: Максимум
      • Аспро: Next
      • Аспро: Оптимус
      • Аспро: Маркет
      • Аспро: Шины и диски 2.0
      Корпоративные сайты
      • Аспро: Корпоративный сайт 2.0
      • Аспро: Приорити – Корпоративный сайт
      • Аспро: Корпоративный сайт современной компании
      • Аспро: Ландшафт – благоустройство и проектирование
      • Аспро: Digital-компания
      • Аспро: Медицинский центр 2.0
      • Аспро: Стройка - сайт строительной компании
      • Аспро: Курорт - сайт базы отдыха, санатория, гостиницы
      • Аспро: Корпоративный сайт
      • Аспро: Корпорация
      Магазин
      • Аспро: Готовые сайты
      • 1С-Битрикс: Управление сайтом
      • 1С-Битрикс24: Корпоративный портал
      • 1С-Битрикс: Мобильное приложение
      • Решения от наших партнеров
      Услуги
      • Создание сайтов
        • Интернет-магазины —
        • Корпоративные сайты
      • Поддержка и развитие
        • Подключение онлайн-касс —
        • Ускорение сайтов —
        • Техническая поддержка
      • Реклама и продвижение
        • Оптимизация сайтов —
        • Контекстная реклама —
        • SEO для интернет-магазинов —
        • Продвижение сайтов
      • Битрикс24
        • Переход на 1С-Битрикс24: Интернет-магазин + CRM —
        • Разработка приложений для Битрикс24 —
        • Внедрение Битрикс24 —
        • Создание лендинга на Битрикс24
      • Миграции
        • Миграция на «Аспро: Максимум» —
        • Миграция на «Аспро: Шины и диски 2.0» —
        • Миграция на «Аспро: Next»
      • Обучение
        • Курс "Мастер Аспро"
      Портфолио
      • Интернет-магазины
      • Корпоративные сайты
      • Битрикс24
      • Другое
      Блог
      • Статьи
      • Обновления
      • Акции и скидки
      • Новости
      • События
      • CRM для бизнеса
      Поддержка
      • Оставить заявку
      • Документация
      • База знаний
      • FAQ
      Партнерам
      Компания
      • О нас
      • Вакансии
      • Клиенты
      • Сотрудники
      • Партнеры
      • Документы
      • Контакты
        0
        Аспро
        0
        Аспро
        • Интернет-магазины
          • Назад
          • Интернет-магазины
          • Аспро: Максимум
          • Аспро: Next
          • Аспро: Оптимус
          • Аспро: Маркет
          • Аспро: Шины и диски 2.0
        • Корпоративные сайты
          • Назад
          • Корпоративные сайты
          • Аспро: Корпоративный сайт 2.0
          • Аспро: Приорити – Корпоративный сайт
          • Аспро: Корпоративный сайт современной компании
          • Аспро: Ландшафт – благоустройство и проектирование
          • Аспро: Digital-компания
          • Аспро: Медицинский центр 2.0
          • Аспро: Стройка - сайт строительной компании
          • Аспро: Курорт - сайт базы отдыха, санатория, гостиницы
          • Аспро: Корпоративный сайт
          • Аспро: Корпорация
        • Магазин
          • Назад
          • Магазин
          • Аспро: Готовые сайты
          • 1С-Битрикс: Управление сайтом
          • 1С-Битрикс24: Корпоративный портал
          • 1С-Битрикс: Мобильное приложение
          • Решения от наших партнеров
        • Услуги
          • Назад
          • Услуги
          • Создание сайтов
            • Назад
            • Создание сайтов
            • Интернет-магазины
            • Корпоративные сайты
          • Поддержка и развитие
            • Назад
            • Поддержка и развитие
            • Подключение онлайн-касс
            • Ускорение сайтов
            • Техническая поддержка
          • Реклама и продвижение
            • Назад
            • Реклама и продвижение
            • Оптимизация сайтов
            • Контекстная реклама
            • SEO для интернет-магазинов
            • Продвижение сайтов
          • Битрикс24
            • Назад
            • Битрикс24
            • Переход на 1С-Битрикс24: Интернет-магазин + CRM
            • Разработка приложений для Битрикс24
            • Внедрение Битрикс24
            • Создание лендинга на Битрикс24
          • Миграции
            • Назад
            • Миграции
            • Миграция на «Аспро: Максимум»
            • Миграция на «Аспро: Шины и диски 2.0»
            • Миграция на «Аспро: Next»
          • Обучение
            • Назад
            • Обучение
            • Курс "Мастер Аспро"
        • Портфолио
          • Назад
          • Портфолио
          • Интернет-магазины
          • Корпоративные сайты
          • Битрикс24
          • Другое
        • Блог
          • Назад
          • Блог
          • Статьи
          • Обновления
          • Акции и скидки
          • Новости
          • События
          • CRM для бизнеса
        • Поддержка
          • Назад
          • Поддержка
          • Оставить заявку
          • Документация
          • База знаний
          • FAQ
        • Партнерам
        • Компания
          • Назад
          • Компания
          • О нас
          • Вакансии
          • Клиенты
          • Сотрудники
          • Партнеры
          • Документы
          • Контакты
        • Мой кабинет
        • Корзина0
        • 8 (800) 500-47-11
        info@aspro.ru
        454031, г. Челябинск, ул. Молодогвардейцев, 31, оф. 801
        • Вконтакте
        • Facebook
        • Instagram
        • Telegram
        • YouTube
        • Главная
        • Блог
        • Статьи

        Уменьшение размеров картинок для сайта

        16 Ноября 2012
        Статьи

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

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

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

        Размеры и мегапикселы

        Для начала разберемся с размерами: что это такое, и какой размер считать нормальным. Размер изображения в компьютере измеряется в количестве точек (пикселей), чем больше точек тем крупнее и качественнее фотография. Например, картинка ниже имеет размеры в ширину 470 пикселей, а в высоту 360.

        1018-485.jpg

        Таже самая картинка, но уменьшенная до размера 300 х 229.

        1018-485-300x229.jpg

        Типовые фотографии, получаемые с современных цифровых фотоаппаратов, имеют размеры в десятки раз больше представленных. Например 4032×3024, что эквивалентно 12МП (12 мегапикселей) и это не предел.

        Такие необработанные фотографии имеют достаточно большой объем 3-5 Мегабайт и, если не предпринимать никаких дополнительных действий, то страничка вашего сайта с 4-5 фотографиями будет загружаться дольше минуты, что неприемлемо долго.

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

        browser_dimension.png

        Сегодня большинство дисплеев отображают не более 1600×1200 пикселей, так зачем делать фотографии больше? Посетителю все равно придется их уменьшать. Конечно, бывают узкоспециализированные сайты где требуется размещение полноразмерных фотографий, но это совсем другая задача.

        Я рекомендую уменьшение размера исходных фотографий хотя бы до 1600×1200 пикселей.

        Уменьшаем фотографию

        Для уменьшения фотографий придется использовать специальные программы-редакторы, например, Adobe Photoshop, ACDSee, Picasa, XnView, FastStone Image Viewer и другие.

        Самый простой вариант -воспользоваться бесплатной (для частных пользователей) программой FastStone Image Viewer (http://www.faststone.org/FSViewerDownload.htm). Программа полностью переведена на русский язык и имеет очень простой и понятный интерфейс.

        Для того, чтобы изменить размер фотографии, находим ее в списке справа, выделяем мышкой и открываем меню «Правка — Изменить размер»

        fs_resize.png

        В открывшемся окне выбираем стандартный размер 1600 х 1200.

        fs_resize_dlg.png

        Нажимаем ОК и сохраняем изменения.

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

        Уменьшение размеров множества фотографий в один клик

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

        Для этого в FastStone Image Viewer есть специальный режим пакетной обработки фотографий. С его помощью можно пережать сотни и тысячи фотографий с едиными настройками.

        Для этого открываем меню «Сервис — Пакетное преобразование/переименование фотографий»

        fs_packet_resize_menu.png

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

        Для решения поставленной задачи произведите следующие действия и настройки:

        1. Добавьте все необходимые файлы изображений из левой части окна в правую.
        2. Установите выходной формат в .jpg
        3. Снимите галочку «Выходная папка»
        4. Установите галочку «Изменить настройки (размеры...)»
          1. Нажмите кнопку «Дополнительно»
          2. Произведите настройки в соответствии с рисунком

        5. Установите галочку «Менять имя» и впишите в поле справа «*-small» без кавычек. Данная инструкция позволит сохранить изображения-оригиналы, а уменьшенные картинки будут иметь суффикс -small.
        6. Проверьте все настройки еще раз и нажмите старт!

        По окончании процесса вы получите полностью готовые фотографии небольшого размера!


        Подписаться на
        рассылку

        Будьте в курсе последних новостей отрасли

        Подписаться
        • Комментарии
        Загрузка комментариев...

        Назад к списку
        Услуги
        Создание сайтов
        Поддержка и развитие
        Реклама и продвижение
        Битрикс24
        Миграции
        Обучение
        Продукция
        Аспро: Готовые сайты
        1С-Битрикс: Управление сайтом
        1С-Битрикс24: Корпоративный портал
        1С-Битрикс: Мобильное приложение
        Решения от наших партнеров
        Компания
        О нас
        Вакансии
        Клиенты
        Сотрудники
        Партнеры
        Документы
        Контакты
        Проекты
        Блог
        Документы
        Контакты
        Подписка на рассылку
        Заказать звонок
        info@aspro.ru
        454031, г. Челябинск, ул. Молодогвардейцев, 31, оф. 801
        • Вконтакте
        • Facebook
        • Instagram
        • Telegram
        • YouTube
        Версия для печати
        Политика конфиденциальности
        © 2021 Все права защищены.
        Заказать звонок
        Написать сообщение