Итак, вы создаете новый сайт, но Вы на данном этапе еще не владете всем обилием великолепныx изображений от своего дизайнера или заказчика. Чтобы продолжить работу, вам могут потребоваться некоторые изображения, которые могут придать более оконченный вид сайта. Вот некоторые сайты, которые могут помочь вам в этом, некоторые профессиональные, а некоторые, скажем, более креативные альтернативы.
Профессиональные генераторы изображений
Lorem Picsum
Особенности:
- Укажите ширину и высоту
- Изображения в градациях серого
- Случайные изображения
- Получить конкретное изображение
- Изображения в формате JSON
Образец
Пример использования
https://picsum.photos/200/300
Образец изображения
Lorempixel
Особенности:
- Укажите ширину и высоту
- Изображения в градациях серого
- Случайные изображения
- Изображение по категории
- Получить конкретное изображение
- Текст на изображении
Образец
Пример использования
https://lorempixel.com/420/320/abstract/1/Sample
Образец изображения
ImgPlaceholder
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона (и прозрачный фон)
- Пользовательский шрифт + цвет + размер
- Пользовательский текст
- Изображение из шрифта (шрифт потрясающий, Ionicons, Glyphicons)
Образец
Пример использования
https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image
Образец изображения
https://imgplaceholder.com/420×320
Placeholder.com
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
Образец
Пример использования
images/image_1929.jpg
Образец изображения
ImgPlaceholder
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона (и прозрачный фон)
- Пользовательский шрифт + цвет + размер
- Пользовательский текст
- Изображение из шрифта (шрифт потрясающий, Ionicons, Glyphicons)
Образец
Пример использования
https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image
Образец изображения
Placeholder.com
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
Образец
Пример использования
Образец изображения
PlaceIMG
Особенности:
- Укажите ширину и высоту
- Изображения на основе категорий
- Эффект размытия, оттенков серого и сепии
Образец
Пример использования
https://placeimg.com/420/320/tech/grayscale
Образец изображения
Ipsum Image
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
- Множественный формат изображения
Образец
Пример использования
https://ipsumimage.appspot.com/420x320,ff7700
Образец изображения
LoremFlickr
Особенности:
- Укажите ширину и высоту
- Изображения на основе категорий
- Изображения на основе цвета
Образец
Пример использования
https://loremflickr.com/420/320?lock=1
Образец изображения
DummySrc
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
- Множественный формат изображения
Образец
Пример использования
http://www.dummysrc.com/430x320.png/22c5fc/17202A
Креативные генераторы изображений
Отличная альтернатива этим жестким и скучным обычным заполнителям – использование, скажем, более творческого заполнителя. Внизу предоставлены несколько замечательных заполнителей, фокусирующихся на более веселых фото сюжетах.
Животные
Placekitten
Образец кода
images/image_1948.jpg
Образец изображения
PlaceIMG
Особенности:
- Укажите ширину и высоту
- Изображения на основе категорий
- Эффект размытия, оттенков серого и сепии
Образец
Пример использования
https://placeimg.com/420/320/tech/grayscale
Образец изображения
Ipsum Image
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
- Множественный формат изображения
Образец
Пример использования
https://ipsumimage.appspot.com/420x320,ff7700
Образец изображения
LoremFlickr
Особенности:
- Укажите ширину и высоту
- Изображения на основе категорий
- Изображения на основе цвета
Образец
Пример использования
https://loremflickr.com/420/320?lock=1
Образец изображения
DummySrc
Особенности:
- Укажите ширину и высоту
- Пользовательский цвет фона
- Пользовательский цвет шрифта
- Пользовательский текст
- Множественный формат изображения
Образец
Пример использования
images/image_1948.jpg
Образец изображения
Placebear
Образец кода
images/image_1952.jpg
Образец изображения
Знаменитости
Fill Murray
Образец кода
https://www.fillmurray.com/420/320
Образец изображения
Steven SeGALLERY
Образец кода
https://www.stevensegallery.com/420/320
Образец изображения
Разное
Baconmockup.com
Образец кода
https://baconmockup.com/420/320
Образец изображения
Placebeard
Образец кода
https://placebeard.it/420/320
Образец изображения
Генераторы изображений на стороне клиента
Иногда вы можете не захотеть импортировать изображение из страшного интернета, или вы хотели бы иметь возможность работать в автономном режиме. В этом случае вы можете использовать заполнитель в виде javascript фреймверка.
Одним из таких альтернатив является Holder.js