Как правильно разместить изображение на сайте?
Согласно моему названию, каков правильный путь? Я видел, как оба они появляются на веб-сайтах:
<img alt="My image" height="60" src="http://www.website.com/images/myimage.png" width="80">
А также
<img src="images/myimage.png" width="60" height="80" alt="my image"/>
Что хорошего в каждом типе? Помогает ли 1-й способ более быстрой загрузки изображения по сравнению со 2-м?
Благодарю.
6 ответов
Второй пример - это относительный URL. В целом, это лучше для масштабируемости, когда вы не жестко программируете такие вещи, как URL.
Разница лишь в том, что если изображение не в том же домене, вы должны использовать полный URL. Там нет разницы в скорости.
Если у вас есть относительные URL-адреса, изображения ломаются, если вы перемещаете HTML-файл в другое место; если у вас есть полные URL-адреса, изображения прерываются, если вы перемещаете сайт в другой домен.
Если вы следуете передовым методам, у вас должно быть несколько сред, например, для разработки, тестирования, тестирования, подготовки к работе и производства. По этой причине URL должны быть относительными. Если вы делаете всю свою разработку и тестирование в Prod, ну... это плохой способ ведения бизнеса.
Я предпочитаю второй вариант. ссылка относительно пути, где находится ваш HTML-файл. если вы копируете свой сайт в другой подкаталог и т. д., вам не нужно обновлять HTML-код, который требуется, когда вы выбираете первый вариант. если изображение находится в другом домене, то первым вариантом является путь.
Второй пример не так корректен для загрузки изображений.
Используйте корневой URL-адрес для хорошей практики
<img src="/images/myimage.png" width="60" height="80" alt="my image"/>
Эти URL-адреса всегда относятся к корню папки. Эти URL-адреса полезны при перемещении между серверами.
Определенно лучше использовать относительные URL. Потому что, когда вы что-то меняете в своей структуре кода, вам также придется изменить все ссылки на изображения.
С относительными путями вам вообще ничего не нужно менять.