Images are an indispensable component of a website. It is one reason why people visit sites or click on links. As a Web Designer, it is important to have a good source of free but high-quality images. Stock images or photos are professional photographs of common places, landmarks, nature, events, or people that anyone can license for creative use.
There are three main types of stock photos, each with different licensing rules. First is royalty-free, where the pictures can be used multiple times once a license is purchased, with no time limit on usage. Photographers earn via royalty payments. But, there is a limit to how many times an image can be used. This is called a “print run” and is indicated in the license.
In the case of a rights-managed license, there is usage exclusivity. It means that no other entity can use the image for competitive reasons. Lastly, a public domain image is free to use for any purpose, personal or commercial, without purchasing a license. There’s no limit to how many times a person can use a public domain item, nor is there an expiry.
Legally speaking, a public domain image is free of any copyright whatsoever. But, in some countries or jurisdictions that require explicit “permissions”, there’s Creative Commons Zero(CC0). It is a waiver of rights, but “if the waiver isn’t effective for any reason, then CC0 acts as a license from the affirmer, granting the public an unconditional, irrevocable, non-exclusive, royalty-free license to use the work for any purpose”. In layman’s terms, you may download, modify, distribute, and use an item royalty-free for anything you like, even in commercial applications. Attribution is not required.
ReSplashed, Pexels StockSnap, StartUpStockPhotos, FancyCrave, FreeForCommercialUse, MMTStock, CupCake, UnSplash and PikWizard are excellent sources of rich and high-quality free stock photos with CC0 license. All sites are constantly updated with new photos.
Europeana is special as it focuses on European cultural heritage. They have over 50 million digitized books, music, artwork, etc. New Old Stock is also a good source of vintage pictures. For travel photos, Jaymantri and TravelCoffeeBook have an amazing collection.
ManyPixels has a gallery of free-to-use illustrations.
For some reason, if you want to use somebody else’s face for your social media profile, ThisPersonDoesNotExist is for you. It uses AI to generate a facial image, and it looks real, try it and be amazed.
What’s better than all of those mentioned above? Of course, a search engine for stock images, haha.
VisualHunt, FuriousCamera, and FreePhotos aggregate several providers and make their image stocks searchable. EveryPixel is an AI-powered search engine of over 50 stock photo sources. You can search through both free and paid ones.
Of them all, my favorite is PixaBay. Most of the pictures on this blog come from them. I liked them so much that I joined as my way of giving back. Pix-Zip lets you easily search and select PixaBay images and download them all as a zip file!
An icon is an effective way to communicate with the use of a symbol or glyph. Icons in image format(ICO, PNG, JPEG, etc.) are beautiful to look at, but quirky and difficult to work with. Creating and editing require excellent graphics skills. Sizes are also constrained by standard dimensions: 16 × 16, 24×24, 32×32, 48×48 in Windows PC. iOS and mobile phones have their own dimensions too.
But icon fonts are styled using CSS the same way as regular text. Since they are vector graphics, they’re scalable. You can enlarge it without affecting the quality. They load faster and with fewer HTTP requests. They also have exceptional browser support. No wonder web font icons are popular.
Fontello, it is an icon font generator with numerous ready-to-use icons, such as the popular Font Awesome. To use, select the icons you like and download the stylesheet and fonts. The download contains a demo HTML file that shows you how to integrate it into your project. Another site to check out is WeLoveIconFonts.
For all the merits of icon fonts, they do have limitations. The symbols are limited by what’s offered. If you need more complex images, you have to look elsewhere. The same goes with multi-colors.
SVG(Scalable Vector Graphics) solves these problems. FlatIcon is a good source of SVG. If you need to create and edit your own, Glypher is a unique tool to use. Vecteezy is another place to check out.
A beautiful or sexy image is one way of gaining attention. On websites, text content can be pleasant to look at using the right font type, size, and color. Below are some of the best free font resources to help transform bland words into eye-candy.
Google Fonts has a huge collection of font families. It’s easy to integrate into a web project because it’s hosted. There’s no need to install it on web servers. It’s downloadable for desktop use.
Selecting the right font combination in a project is an art. FontPair and FontJoy pair fonts together based on font family, font style contrast or similarity, and history. Spend hours dabbling through trial and error.
FontForge is a desktop-based font editor that supports a wide variety of formats. It also imports and exports fonts to and from SVG.
I wasn’t aware that favicons are quirky and may appear weird in different browsers and platforms until I visited RealFavIconGenerator. The site has a checker that shows you what it looks like on different devices, and I’m so surprised to know that it doesn’t look pretty on Apple and Android. The checker also explains why it doesn’t display correctly.
The site allows you to easily create favicons from existing images. For optimal results, the dimension should be at least 260 × 260 pixels. Just go to the site and upload your icon, and it will display some options that are available in each device. Just keep things “as is”.
Click the “Generate your Favicons and HTML code” button. It will generate all the icon versions, sizes, and HTML code needed to make it display consistently on your PC, Mac, iPhone, iPad, and Android phones and tablets. Download the files and upload them to your server. Also, don’t forget to integrate the HTML codes into your pages.
OpenDrive is a cloud storage provider offering 5 GB of space in its free Personal plan. The feature that is important is the “Public” folder, which by default allows hotlinking. This will enable you to integrate external files. For example, if you want to add a responsive and platform-independent favicon, follow the steps below.
Register and log in to OpenDrive and open “Public”. Create a folder and name it “favicon”. Although the folder and files are publicly accessible, we have to protect the files from any malicious intent. Set the folder’s “Access Permission” to “Public” and the “Public Upload” to “Disabled”. Also, uncheck the “Public Content” and “Public Download” checkboxes. Save the changes.
You’ll need the direct link to the “favicons”. In order to get it, you have to upload the “test.txt” file. After uploading, copy the “Direct Link(streaming)” entry. It looks something like this: “https://od.lk/s/ODlfMjk4MTYwNF8/test.txt”. Of importance is the value before the filename, which is “https://od.lk/s/ODlfMjk4MTYwNF8/”. This is the favicon’s location. Copy it. You can delete the “test.txt” file as it already served its purpose.
Now, back to RealFavIconGenerator’s options. In the input field, paste the favicon’s location from OpenDrive. Click the “Generate your Favicons and HTML code” button. Download the files and upload them to OpenDrive’s favicon folder. Secure each file by unchecking the “Enable online file editing by third-party applications” checkbox. Save the changes. Next, integrate the HTML code into your site’s template.
To be sure, check if they are installed properly using the site’s “Check Favicon”.
Refresh your website. Tadaa! I’m sure you’re happy with the result, haha.
Formito creates SVG-based favicons using letters and emoji. Nifty, no need to upload images.
Eye-pleasing color is an essential component of web design. As such, bad color combinations will turn off visitors and as such, creating a palette is a skill in itself. Luckily, there’s no need to sweat it out. There are several online services that focus on nothing but colors. Have a colorful read below.
Wouldn’t it be nice if you can use color names instead of cryptic hexadecimal or RGB(Red Green Blue) value? Personally, it is easier to recall colors by name and because of this I use Color Names, haha.
If you’re just interested in colors, Adobe Color has pre-made themes. Checkout their popular and most used. You can create your own too. They also have a feature that allow you to generate a theme based on an image.
However, a website’s colors are determined by a lot of factors. One of the most important is the contrast of the foreground and background. The WCAG 2.0 is a comprehensive guideline to achieve the right contrast ratio, but we will not be dealing with the technical aspects of it here. Remember, the lazy ones find the easiest and most efficient way of doing things.
Color Safe provides beautiful and WCAG 2.0 compliant color palettes based on the background color, font name, font size, font weight and WCAG standards you specify. It then generates color boxes that are arranged base on their contrast ratio in ascending order. The colors are grouped by green, blue, purple, gray, yellow, orange and red hues. Clicking on the color box will display the hex value that you can copy.
A more easier and visual tool is Jxnblk.Com’s Colorable. Unlike above, the fonts are static, instead, you can change the hue, saturation, and lightness of the foreground and background colors to determine the right mix. Changing the settings instantly shows you the color’s hex value, the contrast ratio and its effects on the text and background.
So what’s next? Let’s put these services to work and start building color efficient websites.
Affiliate Disclosure: Post may contains affiliate links. If you use these links to buy something we may earn a commission. Thank You.