Subscribe to the newsletter to receive the latest content.
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.
Pexels StockSnap, StartUpStockPhotos, FancyCrave, FreeForCommercialUse, CupCake, UnSplash, Shopify Stock Photos, Getty Images, 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. Checkout NASA's pictures of the universe daily.
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.
As a Web Designer, you may need a source of image placeholders. PlaceIt, and PicSum are good ones with their own unique features. Here's some PSDGraphics advertise here placeholders.
What's better than all of those mentioned above? Of course, a search engine for stock images, haha.
VisualHunt, 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.
In WordPress, display images with Envira Gallery Lite. Photonic Gallery is more powerful as it sources photos from Flickr, Google Photos and Instagram. Specifically, stream InstaGram with InstaGram Feed. Add image lazy load feature using A3 Lazy Load. Isn't it nice if you can use images in your CDN or cloud service as the featured image? Featured Image from URL does just that. Enable Media Replace easily replace uploaded media. No need renaming or deleting. WPVivid has an unused image clean-up feature.
Get printable labels at WorldLabel.
Giphy is a source of GIFS. For backgrounds, use TopTal's SubtlePatterns.
There are lots of online image editors available, but I find most of the free ones difficult to use as they’re peppered with ads and most have limited features or the advanced features are “pay to use”. Meanwhile, the high-end items are just too expensive for me. I was digging deep into Google’s search results and found a lot of free services that have a clean and professional interface.
For moderate users, try LunaPic, DoneSmart, SuperTools, Pixlr, iPiccy, ILoveImg, and BeFunky. PineTools, and PhotoPea has a lot of image editing tools too. Resizing and cropping are accessible to the public, but more advanced features require a login, which is free. If crop in bulk use, Bulk Image Crop. Also checkout DevianArt's Muro.
FilterBlend applies CSS filter to an image.
Better yet use AI. FreeGen are free image generators with no account needed. PerChance have some nifty image generators: Stable Diffusion AI, Image Generator Professional, and AI Text to Image Generator. CivitaI requires an account.
Google have some free experimental image generators: ImageFX and Whisk. Upscayl is an AI assisted photo enhancement and restoration tool. The desktop version is free, open-source with unlimited use, and available in Linux, Windows and Mac.
Adobe FireFly, MagicHour.AI and Deep AI generates images, icons, videos, with a generous free account.
Stability AI's Stable Diffusion 3.5 offers a free Community license for researchers, developers, small businesses, and creators with less than $1 M in annual revenue.
For advanced users, DarkTable is an open source photography workflow application and raw developer. A virtual lighttable and darkroom for photographers. It manages your digital negatives in a database, lets you view them through a zoomable lighttable and enables you to develop raw images and enhance them.
Sumo.App aside from the usual editing tools, can also generate AI photos based on keywords.
To change background use Remove.BG, Retoucher.Online and PixelCut.AI. InPixio has a background remover. No account needed to download. PhotoRoom automatically adds a white background, you can blur the background or add/replace an AI generated background. It can also remove the background.
For desktop image editors, Paint, Pixia, GIMP, InkScape, Krita, and Pinta are highly recommended. GwenView, Loupe, and Nomacs are free and open source image viewers. Pimp GIMP interface using PhotoGIMP, it is a simple patch to make it look like PhotoShop. Affinity is a free design and photo editing, currently on MacOS and Windows.
SolveSpace is a free parametric 3d CAD tool. Applications include modeling 2d and 3d parts, 3d-printed parts,
preparing CAM data, mechanism design and plane and solid geometry.
For batch editing, renaming, resizing, converting, and watermarking, I'm using XnConvert.
AndreaMosaic allows creation of photographic mosaics made with their own pictures. A photo mosaic is an image composed of many tiled photos.
Create pixel art using PIQ. Create icons from images using RedKetchup's Icon Converter.
VistaCreate is a super-easy graphics and animation design tool. It has ready-to-use templates, so you can play around. The free account provides access to 75K+ templates and more than 1M+ photos. Canva and Adobe's Spark are other services in the same mold. Use both for social media-specific graphics. InstaSize is the desktop option.
Shopify is a free logo maker, no registration is required. Logo Rank is an AI system that understands logo design. It can give tips and ideas.
SproutSocial's Landscape resizes the picture based on the chosen social network or custom size. Collages and cards? ImResizer can resize to standard ID sizes like 2x2 inches. To scale an image use A Sharper Scaling.
If you're looking to convert a PSD (Photoshop Document) file to JPEG, use Zamar's PSD to JPG. JPG.TO converts JPG image to other formats.
Convert .svg to .png or any image extension using FreeConvert. It has conversions of other files type too. Fotor has a .JFIF converter.
Switcheroo is a GNOME app image converter.
For PhotoShop brushes and PSDs, search at Brusheezy.
If you're looking for the most accurate online thumbnail generator, look no further than Site-Shot. It is a paid service, but I can capture screenshots without an account. To capture a snapshot of the browser, the easiest to use is SnipBoard. All you need is a series of keyboard shortcuts. FireShot is another useful alternative, it is a Google Chrome extension. Spectacle and FlameShot are Linux-based desktop screenshot tool. Snapshot is a GNOME app. Here's a list of free websites to create mockup photos and screenshots.
To extract a YouTube or Vimeo video thumbnail, use this. ThumbnailMe is a desktop app. VLC has a Take a Snapshot feature under the Video menu. Here's a detailed instruction on different options to extract thumbnails from videos. Add a play button to a video or audio thumbnail using FBUTube's free tool or this, if you don't mind ads. For DIY, follow the instructions here.
Create graphics from text using WordArt, WordClouds, and Tagxedo. They are easy to use, and the standard quality is free. ABCya have a word clouds generator for kids. Cool Text is graphics generator.
Isomatic.DE is an automatic, isotype tool, can download in SVG or JSON format.
To extract text from an image, Project Naptha has a Google Chrome extension. It's not 100%, but it does most of the job. Did you know Google Keep is also capable of extracting text from images? Now you do, haha.
In some of my web development projects, the site uses so many large-sized images. This can affect the site's loading speed and eat up the server's bandwidth. To prevent this, I optimize the images before using them. Compressor as the name suggests, compresses JPEG, PNG, GIF, and SVG types. It supports lossless and lossy compression with a sufficient 10 MB upload limit. My test shows it effectively reduced an 8.20 KB JPEG file to only 0.410 KB with no visible quality degradation. That's a whopping 95% improvement. The page shows both the original and the compressed version, so you can instantly see the difference. Also, good alternatives are Squoosh, Compress or Die, and ImageRecycle. ShortPixel has a free account that allows processing of 200 images per month. For desktop use, use Pingo.
FotoForensics detects an altered photo or image. Useful in confirming ID and document submissions. However, it takes skills to know, so they prepared a tutorial to help you become a photo forensics expert.
TinyEye is special, it is a reverse image search engine. What it does is search for similar images online. It is very useful if you need a smaller or larger version of the picture. I also use it to confirm if a person's photo is really theirs. Google Lens is another option.
What is a QR code? According to Wikipedia, it is "a matrix barcode (or two-dimensional code), readable by QR scanners, mobile phones with a camera, and smartphones." QR is short for Quick Response. Unlike standard bar codes, it can store more information about an item like the manufacturer's website, product description, the company's address and contact information, etc.
GOQR.ME is a free online service you can use to generate a QR code and download it as an image in PNG format. I mainly use it as a profile picture, but with some useful information embedded that's only machine-readable. Other notable options are QRStuff, QR Code Generator and QRCode Monkey.
WebsitePlanet's Free QR Code Generator creates fully customizable QR codes, can change colors, add frames, and even include a logo or social links. A simple way to make QR codes more visually appealing and engaging.
QRCode.js is Javascript-based QR code generator.
For BarCode generators, use BarCode-Generator and ScandIt. JSBarCode is JS-based barcode generator.
If using WordPress and you encounter this error: “Post-processing of the image failed, likely because the server is busy or does not have enough resources. Uploaded a smaller image may help. Suggest maximum size is 2500 pixels.”
A solution that fixed it, in my case, is to use GD Library instead of ImageMagick for image processing. Add the following to your theme’s function.php file:
add_filter('wp_image_editors', function($editors){
return ['WP_Image_Editor_GD', 'WP_Image_Editor_Imagick'];
})
That should solve it. Find all solutions here.
If you need to get rid of unused images on a WordPress site try Media Cleaner, just be extra careful though. Ever in a situation where you need to rename an image that's already used in a post or more? Its tedious, better use Phoenix Media Rename, haha. Want to ride the WebP bandwagon? Check this article that list popular WebP conversion plugins.
If working with Elementor Page Builder, you can achieve parallax effect by following the tutorial here.
---
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. Search for icons already supported by browsers, computers and phones.
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.
An easier and faster way of integrating icon fonts is to use hosted services. No need to download any files. Google's Material is making theirs available. Refer to the documentation here.
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. Lucide.DEV, LineIcons and BootStrap Icons have embeddable SVG code, no need to include files.
MobiriseIcons and LinearIcons provide both webfont and SVG icons.
UXWing provides free SVG and PNG icons for commercial use with no attribution. Here's a cookie icon.
Hongkiat have a list of RSS feed icons.
---
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.
If using Blogger for web hosting, in the "Path" tab, select "I cannot or I do not want to place favicon files at the root of my web site". Blogger doesn't support file hosting. The solution is to use third-party services for favicons, images, JavaScript, CSS, and other files.
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.
FavIcon.IO, RedKetchup FavIcon-Generator and WebSitePlanet are alternatives. FavIcon.IO has other tools like a favicon converter and a logo generator.
Formito creates SVG-based favicons using letters and emoji. Nifty, no need to upload images.
Affiliate Disclosure: Post may contain links to affiliate websites, and we may receive a commission for any purchases or actions made by you on the websites using such links. Thank You.