Alive Afterall (alaft) wrote,
Alive Afterall
alaft

Псто о картинках

Расскажу малость о картинках.



1. Где взять ссылку

Если вы пользуетесь вполне обычными браузерами (Internet Explorer, Mozilla Firefox, Opera, Google Chrome), то достаточно кликнуть правой кнопкой мыши по загруженной вами картинке того размера, которую вы желаете перенести в ЖЖ, и выбрать пункт "Копировать/сохранить адрес/ссылку на изображение/картинку/ярлык" - и у вас в буфере обмена будет прямая ссылка (гиперссылка) на картинку. Например, такая:
http://alaft.users.photofile.ru/photo/alaft/96518809/120342087.jpg

2. Как вставить картинку

Для вставки картинки на страницу через гиперссылку используется следующий тэг:
<img src="адрес картинки">

В моем случае, это будет выглядеть так (для наглядности гиперссылку выделил красным цветом):
<img src="httр://alaft.users.photofile.ru/photo/alaft/96518809/120342087.jpg">

На странице это даст вот такой результат:



Для лучшего оформления на странице, я лично люблю делать для картинок рамку (ее видно, даже если картинка не загрузилась по причине тормознутости сервера - читателю будет понятно, что следует еще разок нажать F5) и пространство в 10 пикселей над и под картинкой. Делаю я это с помощью параметров "border" и "vspace" в тэге:

<img src="httр://alaft.users.photofile.ru/photo/alaft/96518809/120342087.jpg" border=1 vspace=10>


3. Как вставить ссылку на картинку

Иногда нужно вставить не полноразмерку, а превьюшку, являющейся ссылкой на картинку. Так делает фотогалерея самого ЖЖ (она делает это кривовато, но об этом ниже). Для картинки с гиперссылками код превьющки ссылки будет такой:

<a href="адрес картинки"><img src="адрес превьюшки"></a>

В моем случае это выглядит так (для наглядности гиперссылку превьюшки даю зеленым, а картинки - красным):
<a href="httр://alaft.users.photofile.ru/photo/alaft/96518809/120342087.jpg"><img src="httр://alaft.users.photofile.ru/photo/alaft/96518809/middle/120342087.jpg"></a>

Результат таков (кликабельно):



Если же нужно, чтобы картинка открывалась не вместо этой же страницы, а в новом окне/вкладке, в тэг добавляется параметр target=_blank (Тёма Лебедев этого ужасно не любит, но менее понтовые веб-верстальщики себе позволяют))):

<a href="адрес ссылки" target=_blank><img src="адрес картинки"></a>

Вот результат этого (снова кликабельно):



Еще можно написать не target=_blank, а, допустим, target="my_image" (или любое другое слово латиницей в кавычках) - и все фотки будут открываться в одном и том же другом окне(или вкладке), а не каждый раз открывать новое.


4. Чем сжимать

Если вы хоть немного заботитесь о качестве снимка, то сжимать его лучше специальными программами для обработки фоток: Photoshop, Gimp, Corel photopaint, Adobe illustrator и еще куча других. Сжимать сразу до нужного размера и давать ссылку на изображение загруженного размера. Указанные выше редакторы дают хорошее, годное качественное, мягкое сжатие до нужного размера.

А средства фотохостингов зачастую сжимают по более простым алгоритмам. И если вы заливаете фотку в 3000 пикселов по длинной стороне, а в журнал выкладываете сжатое скриптами хостинга изображение в 800 пиксел по длинной стороне, то не удивляйтесь, если, например, рядом с темными линиями на светлом фоне будет видна рябь.

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

Вот пример ряби на фотке, снятой мыльницей и сжатой пэйнтом (особенно заметна у мачты корабля и у ствола дерева на фоне неба):


А вот как ее сжимает тот же Corel (а фотошопом будет еще лучше):



5. Адреса картинок в ЖЖ

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



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

<a href="httр://pics.livejournal.com/alaft/pic/0023grd6/"><img src="httр://pics.livejournal.com/alaft/pic/0023grd6/s640x480" width="640" height="480" border='0'/></a>

...и получаем более короткий результат:



А теперь берем зеленый фрагмент из этого кода:

<a href="httр://pics.livejournal.com/alaft/pic/0023grd6/"><img src="httр://pics.livejournal.com/alaft/pic/0023grd6/s640x480" width="640" height="480" border='0'/></a>

и вставляем его в собственный тэг img:

<img src="httр://pics.livejournal.com/alaft/pic/0023grd6" border=1 vspace=10>

И получаем прямую загрузку картинки на страницу:



6. Адреса картинок на фотофайле

На photofile.ru адреса превьюшек и полного изображения делаются по такой системе (на примере моей же картинки):

Мелкое: http://alaft.users.photofile.ru/photo/alaft/96518809/small/120342087.jpg
Среднее: http://alaft.users.photofile.ru/photo/alaft/96518809/middle/120342087.jpg
Крупное: http://alaft.users.photofile.ru/photo/alaft/96518809/large/120342087.jpg
Просмотровое: http://alaft.users.photofile.ru/photo/alaft/96518809/xlarge/120342087.jpg
Исходное: http://alaft.users.photofile.ru/photo/alaft/96518809/120342087.jpg

Разницу в коде увидеть несложно. Для самостоятельной генерации этого кода достаточно знать два числа - номер альбома (в данном случае - 96518809) и номер фотки (в данном случае - 120342087). У каждого альбома и каждой фотки на Фотофайле свой уникальный номер по сквозной нумерации через всех пользователей, поэтому он такой длинный. Видимо, им так удобнее для работы сервака. Для любителей утаскивать фотки по гиперссылкам на сторонние ресурсы типа ЖЖ (это называется хотлинкинг) слегка геморно, но если приноровиться, то ничего страшного.
Subscribe

  • Николай Есенин и Сергей Добронравов

    Да! Теперь решено. Без возврата Тает быстрое время чудес. Уж не будет листвою крылатой Возвращаться в свой сказочный лес. На трибунах становится…

  • Новый тэг

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

  • Литературный вечер

    Люблю тебя, Петра творенье, Когда весенний первый гром, Как мимолетное виденье Всё ходит по цепи кругом. Я помню чудное мгновенье - Златая цепь на…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 20 comments

  • Николай Есенин и Сергей Добронравов

    Да! Теперь решено. Без возврата Тает быстрое время чудес. Уж не будет листвою крылатой Возвращаться в свой сказочный лес. На трибунах становится…

  • Новый тэг

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

  • Литературный вечер

    Люблю тебя, Петра творенье, Когда весенний первый гром, Как мимолетное виденье Всё ходит по цепи кругом. Я помню чудное мгновенье - Златая цепь на…