21:41 Оптимизация изображений для сайта с Adobe Photoshop | |
Оптимизация изображений для сайта с Adobe PhotoshopОптимизация изображений для сайта
Оптимизируем в ФотошопеИ так для чего нужно оптимизировать изображения, допустим вы написали пост, будем исходить из данного, конкретного примера Оптимизация изображений для сайта с Adobe Photoshop допустим мне надо вставить в начало статьи логотип программы, вот захотелось мне поступить именно так. Где я беру изображения, да особо не заморачиваюсь пока, переходим Google картинки и в поиск вбиваем желаемую фразу Фотошоп.
Далее попадаем в коллекцию изображений по данной теме и выбираем то, что понравилось. Нажимаем по нему мышкой и картинка откроется вот в таком окне, в реальном размере.
Опять используя мышку, правой кнопкой щёлкаем на открывшемся изображении и выпавшем меню выбираем пункт Копировать картинку переходим в Фотошоп и жмём сочетание клавиш Ctrl+N или заходим в верхнее меню и выбираем Фаил далее Создать кому как удобней. Появится окно с размерами выбранного изображения изображения. Здесь можно ни чего не менять и просто жмём ОК
Откроется фон, куда мы и вставим выбранное ранее изображение сочетанием клавиш Ctrl+V теперь можно с ним поработать. В первую очередь выберем нужный нам размер. Для этого перейдём в меню Изображение И выбираем пункт Размер изображения либо используем сочетание клавиш Alt+Ctrl+I
Здесь мы можем задать нужный нам размер, для примера, в данный текст я вставил несколько скриншотов, меня интересовала только их ширина чтоб они нормально вписались в текст. Поэтому я могу задать только ширину, и если не снимать галочки на Масштабировать стили и Сохранить пропорции изображение изменится пропорционально, просто изменив свою ширину. Но первая картинка в статье мне нужна заданного размера, а именно 300 на 200, как и во всех остальных статьях. Поэтому я пожертвую пропорциональностью и уберу галочки с масштаба и пропорции. А ширину и высоту изображения задам исходя из нужного размера. Жмём ОК. Теперь у нас отображается изображение, новыми заданными размерами. Размеры изменили, теперь надо сохранить картинку и уменьшить её вес. Для этого снова открываем в верхнем меню Файл и ищем пункт Сохранить для Web и устройств… или пользуемся сочетанием клавиш Alt+Shift+Ctrl+S. Попадаем вот в такое окно
Здесь нам интересны два пункта отмеченные стрелочками. Главное указать желаемый размер сжатия. Я обычно выставляю Среднее и 40. Тут уже каждый волен поступать, как ему больше нравится. Жмём сохранить и можем выбрать место куда будем сохраняться и имя файла.
Такой момент. В самом начале я не мог понять, почему одни изображения у меня легко открываются в WordPress а другие, что бы я с ними не делал, не открываются ни в какую. Ответ оказался прост, как ни когда. Я прописывал имя изображения на русском языке, и именно их WP и не хотел открывать Вставляем изображение в статью
Давайте посмотрим, что нам удалось сделать. Верхнее изображение до сжатия, размер 60 КБ, а нижнее пошло в статью и сжато. Вес его всего 16 КБ. Внешних же отличий практически не заметно. Подумайте сами если таких не сжатых картинок у вас пару сотен, а возможно и больше, а оно вам надо. Вот кратко изложил в чём принцип оптимизации изображения. Возможно я что-то не так делаю, возможно есть более простые способы. Не знаю, пока я не очень опытен в этом деле. учусь так сказать. Больше на своих конечно ошибках, если интересно Читайте блог там пытаюсь отразить все свои потуги. На этом у меня всё. Благодарю за потраченное время. Возможно вам будет интересно.Post navigation
Как оптимизировать изображения для сайтаИнтересные записи
| |
|
| |
Всем привет. Открыть рубрику Фотошоп я решил именно с этой статьи. Почему? На мой взгляд, если начали работать с сайтом или блогом оптимизация изображений один из важных моментов, согласитесь ни одна интернет площадка без каких-либо картинок, коллажей и тому подобных вещей не обойдётся. Чтоб смотрелось всё это на более-менее достойном уровне надо и с размером поработать и вес изображения уменьшить, желательно без потери качества. Раз уж такая проблема существует решать её надо изначально, чтобы в дальнейшем к ней не возвращаться. Существует множество различных программ по данной тематике, почему же тогда Фотошоп, я свой выбор основывал на могучем функционале этой программы, хотя для сайта использую в основном наипростейшие. Сразу во всём разобраться наверно будет довольно затруднительно, но если идти постепенно, от простого к сложному я думаю проблем не будет. Скачать программу можно в интернете, вопросы с бесплатной активацией при желании тоже решаемы. У меня установлена 5 версия, старенькая, но вполне устраивает.
Теперь картинка сохранена и мы без труда можем вставить её в текст статьи. Для этого достаточно указать место куда мы хотим её поместить и выбираем Добавить медиафайл. теперь жмём Загрузить файл и просто можем перетащить мышкой нужное изображение или указать к нему путь. Далее можете сделать необходимые записи в Описании и Атрибут alt, добавить подпись если необходимо, выставить как картинка должна | Всего комментариев: 0 | |