Как выложить картинку на сайт

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

Итак, давайте представим классический пример: есть картинка и есть сайт. Задача: закачать картинку на хостинг , не используя при этом сторонних программ.

Я покажу вам, как это сделать, на примере хостинг-провайдера Timeweb. На других площадках принцип тот же, но в данной статье я физически не смогу охватить все случаи.

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

Далее двойным нажатием клавиши мыши открываем папку «public_html»

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

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

Открываем только что созданную папку

Теперь в выпадающем меню необходимо нажать кнопку «закачать»

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

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

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

О том, как расположить картинку в сайдбаре и сделать ее кликабельной (при нажатии на картинку клавишей мышки происходит переход на заданную страницу) читайте в этой статье.

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

До встречи в новых статьях на страницах моего блога!

P.S. А если вы хотите научиться делать профессиональные сайты и начать зарабатывать с их помощью реальные деньги, то у меня для Вас есть отличный подарок! Бесплатный видеокурс по созданию собственного сайта! Переходите по ссылке и начинайте зарабатывать деньги в интернете:

Похожие записи

Спасибо за столь подробные действия по установке картинки на сайт а как это сделать на хостинге Offerhost. С уважением, Александр!

Александр, все делается по аналогии, только на офферхосте Вы загружаете картинку не в папку public_html, а просто в папку Вашего сайта на виртуальном хостинге

Дмитрий, здравствуйте!
Правильно ли я поняла из вашего ответа к комментарию Александра, что это практически дубль видео про картинки из записей 2-го дня Пути блогера? С момента написания статьи — март 2015 — много воды утекло))). Насколько проще стало грузить картинки, в частности — на Офферхосте — и это здорово!

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

Дмитрий, расшифруйте, пожалуйста, Вашу фразу: » Я использую разные способы в зависимости от того, какую цель я преследую» В чем плюсы и минусы?

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

Спасибо, Дмитрий. Как говорит наш шеф и довольно часто: «Как видите, все очень просто….». Конечно, лично у меня сразу возникает ответ: «Ну почему же я такой дурень?». После успокоения, беру да делаю. Оказывается прав Евгений.

Да, и подписчиков набирать просто, когда в этом разбираешься более детально, и блог вести приятно, а не в напряг, сначала все новое всегда вызывает некоторые трудности, но нужно просто «взять и сделать»

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

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

PostImage

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

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

TinyPic

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

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

Максимальный размер картинок — 1600px в ширину и высоту, до 100 Мб. Доступна загрузка видеороликов продолжительностью до 5 минут.

Free Image Hosting

Free Image Hosting похож на Imgur, но с менее стильным интерфейсом и без удобных гиперссылок. Также следует отметить довольно внушительное количество рекламы на сайте. Если вы не возражаете против нее, загружайте фотографии и обменивайтесь ими даже без регистрации.

Изображения сохраняются на сайте навсегда. Это касается и анонимных пользователей. Доступна загрузка GIF-файлов. Некоторые из них могут выглядеть искаженными, если они слишком большие по размеру.

Плюсы:

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

Максимальный размер файла — 3000 Кб для фотографии.

ImageVenue

ImageVenue поддерживает загрузку фотографий в формате JPEG размером до 3 Мб. Также можно изменять размер больших фото во время загрузки. Качество картинки и соотношение сторон при этом сохраняются. Это удобный инструмент для тех, кто пользуется досками объявлений и социальными сетями. Сервис очень прост в использовании.

Imgur

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

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

Фотографии и GIF-анимация загружаются быстро и просто, без потери качества. Максимальный размер файла — 20 Мб для всех неанимированных картинок и 200 Мб для — анимированных.

Google Photos

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

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

Google Photos также позволяет редактировать изображения, группировать их по разным параметрам, делиться ими с другими людьми (в том числе не имеющих аккаунта в Google Photos). Чем дольше вы используете этот сервис, тем больше он узнает о ваших предпочтениях, что позволяет автоматически группировать изображения так, как это удобней для вас.

Плюсы:

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

Максимальный размер файла неограничен. Сервис позволяет сохранять фотографии, сделанные на камеры с разрешением до 16 Мп. Ограниченное пространство выделяется для кадров, сделанных камерами DSLR. Также доступна загрузка видео в формате 1080p HD.

Flickr

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

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

Официальное мобильное приложение Flickr — одно из главных преимуществ сервиса. Доступен также инструмент Flickr Uploader, создающий резервные копии фотоизображений с компьютера, Apple iPhoto, Dropbox и других мест.

Плюсы:

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

Чтобы другие люди могли скачивать ваши фото, обязательно опубликуйте их в соответствии с лицензией Creative Commons. Максимальный размер хранилища — 1000 Гб.

500px

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

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

Плюсы:

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

Поскольку 500px — скорее социальная сеть, чем фотохостинг, сервис не имеет никаких ограничений на размера загружаемого файла. Опытным путем удалось установить, что можно загружать даже очень большие изображения в формате JPEG. Для обладателей обычных профилей существует ограничение — до 20 загружаемых фотографий в неделю. Это ограничение снимается (а также предоставляются дополнительные возможности), если вы переходите в премиум-пользователи и ежегодно платите $25.

Dropbox

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

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

Плюсы:

• обмен отдельными фотографиями или целыми папками.

Максимальный размер хранилища — 2 Гб. Есть возможность получить дополнительный объем, приглашая других людей присоединиться к Dropbox или перейдя на платный тариф.

ImageShack

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

Настройте параметры конфиденциальности, если не хотите, чтобы ваши фотографии были видны другим пользователям. ImageShack имеет несколько приложений для мобильных устройств. Можете воспользоваться этим ПО, чтобы упростить загрузку фотографий и обмен ими. Максимальный объем хранилища — 10 Гб в месяц для обычных пользователей.

Задача

Вставить изображение на веб-страницу.

Решение

Для добавления изображения в документ применяется тег , его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега необходимо указать обязательный атрибут alt , он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.

Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла (пример 1).

Пример 1. Добавление картинки на веб-страницу

HTML5 IE Cr Op Sa Fx

Учтите, что когда используется XHTML или строгий HTML4, то тег допустимо размещать только внутри блочных элементов вроде