How to Design a Blog and Monetizes it in 2020?

This is a general article I will create a series of articles that will explain each step in more detail. Keep visiting my blog for more and more information.

I will explain my own approach which I tried and tested and saw its results. With WordPress CMS (Content Management System), you can share your experience, your favorite recipes, your lifestyle, share photos and stories of your travels, or anything you are interested in your life using WordPress blog.

Moreover, a well written and SEO friendly blog can top you on the Google ranking and this is easy using basic free plugins that are listed in the plugins category of the WordPress CMS. also, it is essential that the visitors should find your blog appealing. You can achieve this by designing your WordPress blog beautifully. A well-designed blog is beneficial for you in all the aspects. Ad type of theme and its colors differ from field to field also on self-preferences.

To make an amazingly designed blog the key thing is to pick the right blogging platform offering a broad range of design possibilities. WordPress has a huge collection of themes for all types of blogs.

You can check all the free WordPress Themes on this Link:

and you can check all the free WordPress plugins o this link:

Why I recommend WordPress as a blogging platform?

Now that we agreed on why you should use WordPress as a blog platform, you will need to do other steps like:

–    Register a domain name and set up your hosting server.
–    Install WordPress CMS on it and most hosting companies provide a 1 click setup process. And is one of these hosting providers.

–    Use a page builder so that you do not need a lot of coding to create your blog. And I use the “Elementor Pro” page builder it is the paid version of the free plugin “Elementor” but with more capabilities.
–    Work on the Logo and Navigation Menu.
–    Responsive WordPress Blog Website Design, where 80% of the web users are browsing the internet using their mobiles and this is auto-generated with Elementor plugin.

Now you have a blog, we need to monetize it! these are the Best 5 Ways to Monetize Your Blog and Make Money Online

1.    Affiliate Marketing
2.    Advertisements
3.    Sell Courses
4.    Sell Digital Products
5.    Sell Services

1. Affiliate Marketing

One of the most popular methods for monetizing a blog is to leverage affiliate marketing. This is especially useful when you’re just starting out and you don’t have your own products or services to sell.

2. Advertisements

While most people might think that adding some pay-per-click (PPC) ads will be a great way to make lots of money with their blogs, you need to have massive amounts of traffic as in 10,000 visitors per day or more to get the real income. The most recommended platform is Google AdSense.

3. Sell Courses

Selling digital online courses is another way you can profit from blogging. Develop intuitive and helpful courses that add a tremendous amount of value and the rest will be smooth sailing.

The most recommended platform is

4. Sell Digital Products

Digital products can be a combination of eBooks, videos, downloadable guides, resources, PDFs, software components, or plugins. Do your best to create something that helps fill a need. Don’t second guess yourself, as you’d be surprised at just how much money you can make by selling digital products on your blog.

5. Sell Services

Offering you services which you are good at it is one of the passive income methods that you can get and one of the best websites that provide a badge for you and handle payment with a small commission is


Create great content, follow the above steps, and make your blog design outstanding and admirable. Make sure to select an appropriate and creative WordPress theme. And use all 5 ways of monetizing, and the most importing it adding content to your blog on a daily basis to have the most of your blog.

Best 15 Free Stock Photos Websites in 2020

Many of these photographs are free from copyright restrictions or licensed under creative commons public domain dedication. This means you can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. However, some photos may require attribution. I’ve done my best to identify which license they fall under but I still advise you to do your own research and determine how these images can be used.

1. StockSnap


Brief Description: has a large selection of beautiful free stock photos and high-resolution images. The site also has a very handy search feature making it easy to browse through the thousands of images available. In addition, the site tracks views and downloads so you can find the most popular photos available.

2. Pexels


Brief Description:
Pexels provides high quality and completely free stock photos licensed under the Creative Commons Zero (CC0) license. All photos are nicely tagged, searchable and also easy to discover through their discover pages.

3. Unsplash


Brief Description:
Unsplash offers a large collection of free high-resolution photos and has become one of the best sources for stock images. All photos are released for free under the Unsplash license.

4. Burst


Brief Description:
Burst is a resource from Shopify that provides free stock photos for entrepreneurs. Some photos are licensed under Creative Commons CC0 while others fall under Shopify’s own photo license.

5. Reshot


Brief Description:
Reshot is a massive library of handpicked free stock photos you won’t find elsewhere. Built for startups, freelancers. Free to use commercially and editorially–no attribution required.

6. Pixabay


Brief Description:
Pixabay offers a large collection of free stock photos, vectors and art illustrations. All photos are released under Creative Commons CC0.

7. FoodiesFeed


Brief Description:
FoodiesFeed offers thousands of beautiful realistic free food pictures in high resolution. It’s the perfect stock photo site for food bloggers.

8. Gratisography


Brief Description:
Gratisography offers free high-resolution pictures you can use on your personal and commercial projects. New awesome pictures are added weekly and are free of copyright restrictions. All pictures are captured by Ryan McGuire of Bells Design.

9. Freestocks


Brief Description:
Freestock offers a wide range of high-quality photos all released under Creative Commons CC0.

10. Picography


Brief Description:
Picography contains beautiful free stock photos submitted by Dave Meier and various other photographers. All photos are released under Creative Commons CC0.

11. Foca


Brief Description:
Foca is a collection of high-resolution photos provided by Jeffrey Betts. Jeffrey specializes in photos of workspaces and nature. All photos are released under Creative Commons CC0.

12. Picjumbo


Brief Description:
Picjumbo is a collection of totally free photos for your commercial & personal works. New photos are added daily from a wide variety of categories.

13. Kaboom Pics


Brief Description:
Kaboom Pics offers a wide variety of high-quality free stock photos including abstract, city/architecture, fashion, food, landscapes and more. Photos can be used for commercial purposes but cannot be sold or redistributed.

14. SkitterPhoto


Brief Description:
SkitterPhoto offers a wide variety of free stock photos and is released under Creative Commons CC0. All pictures are authentic and created by Skitterphoto’s owners.

15. Life of Pix


Brief Description:
Life of Pix is a resource created by the LEEROY creative agency offering free high-resolution photos with no copyright restrictions.


As you can see, there’s a growing number of fantastic resources for stock photography. These websites have become a blessing for designers, marketers and bloggers. No need to rely on cheesy stock photos anymore!

3 Tips speed up the image-heavy website in 2020

Images are a key component of every website. According to HTTP Archive images make up for more than 60% of data loaded on web pages. Being such a critical component of almost all websites, whether it is e-commerce, news, fashion websites, blogs or travel portals, image optimization is important, and perhaps the lowest hanging fruit, if you are looking to speed up your image-heavy website.

So, let’s get started and look at some simple techniques you can implement today to make significant progress in optimizing your image-heavy website.

1. Resize your images

This is a must-have. Resize your images to exactly what is required on your website. And no, I am not talking about resizing using CSS or in the HTML. I am talking about resizing the image on the server and then sending it to the browser.

For example, you have a 4000x3000px image for a product you want to list on your e-commerce website. On your website, however, you need to show a much smaller image of this product. It could be a 200x300px image on the product listing page and an 800x1000px on the product detail page. Make sure that you scale down the original image to these dimensions BEFORE sending it to the browser. The resized images are much smaller than the original image and will load much faster than the original image.

2. Optimize your images

The next step in speeding up your image-heavy website is to choose the right format and quality for every image on your website.

JPG, PNG, and GIF are the most common image formats being used currently on the web and are each suited for different use cases. There is another relatively new image format called WebP that combines the best of these image formats, is 30% smaller in size and is supported on almost 75% of the modern browsers.

WebP: is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images.

Download Photoshop Plugin to Export WebP from Here

Given the huge performance benefits, you should deliver your images in WebP format wherever possible. On the other browsers, you can continue to deliver the original image format.

Image quality, simply put, is a measure of how the image looks visually. There is a direct correlation between image quality and image size. Higher quality results in higher image size and, as a result, a slow website.

Different image compression methods take advantage of the limitations of the human eye to distinguish between small changes in color information to compress images. As a standard, a quality level of 80 to 90 (on a scale of 100) is usually a good tradeoff between image size and quality.

Comparison between the same image encoded at different quality levels. The images are almost similar visually but have different sizes.

3. Load fewer resources

Even after you have optimized all of your images, loading too many of them is bound to slow down your website and negatively impact the user experience. I am not advocating that we should use lesser images. But there are cases where we can avoid using images or avoid loading them upfront.
For example, instead of loading images, you can create buttons, gradients and other advanced elements using CSS.

The other more important technique that you can use is lazy loading for your images. Lazy loading basically means that we defer the loading of images that are not required immediately. Typically, any image that is not visible to the user on his screen or the viewport, can be loaded at a later point in time i.e. when the image enters or is about to enter the viewport.

Consider a case where you have 100 products on your web page. If you request all the 100 product images at the same time and at the very beginning, it would slow down the load time. The images would compete for network bandwidth and CPU resources with other critical items on the page like CSS and JS.

With lazy loading, we would only load, let’s say, 30 images that are visible to the user initially. Then, when the user starts scrolling down the page, we will keep loading more images. This would help improve the initial load time and user experience. There will be cases where the user doesn’t scroll down the entire page and hence some images would not get loaded at all. Thus, you also end up saving on bandwidth costs for image delivery.

Getting started with lazy loading is very simple with JS libraries like jQuery Lazy.


We have covered all the major techniques around image optimization and performance improvement. With this information in hand, you can solve for 90% of your image related problems, if not more, which would help you get faster page load times and rank higher in search results. Always remember, for images on your website (load lighter, load fewer, and load faster).

Raster Photos Vs. Vector Images

What are raster photos?

Most images you see on your computer screen are raster graphics. Pictures found on the Web and photos you import from your digital camera are raster graphics. They are made up of a grid of pixels, commonly referred to as a bitmap. The larger the image, the more disk space the image file will take up. For example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image (from a 6.3 Megapixel digital camera) needs to store information for a whopping 6,291,456 pixels.

Since raster graphics need to store so much information, large bitmaps require large file sizes. Fortunately, there are several image compression algorithms that have been developed to help reduce these file sizes. JPEG and GIF are the most common compressed image formats on the Web, but several other types of image compression are available.

Raster graphics can typically be scaled down with no loss of quality, but enlarging a bitmap image causes it to look blocky and “pixelated.” For this reason, vector graphics are often used for certain images, such as company logos, which need to be scaled to different sizes.

File extensions: BMP, TIFF, JPG, GIF, PNG

What is the best editor for raster photos?

Adobe Photoshop is an industry-standard image editing program used to edit graphics and digital photos. It is primarily a pixel-based, raster graphics editor, but also supports basic vector-based editing. The program includes standard drawing and selection tools and has several unique features that make it stand out among other image editors.

What is Adobe Photoshop?

Photoshop can import and export a wide variety of image formats, but it saves images in the Photoshop Document (.PSD) format by default. The PSD format supports layers, which are isolated groupings of graphics that can be edited independently. Layers may be visible or hidden and can also have a custom opacity setting. You can also create adjustment layers, which apply nondestructive adjustments to one or more layers at a time.

If you are just beginning to use Photoshop, the application may look daunting with its large amount of tools but the home screen allows for quick and easy access to tutorials and templates to help you get started. As you become more familiar with the user interface and adjust it to your work style, Photoshop saves your preferences to keep the layout familiar.

Some of Photoshop’s more advanced and unique features include the Patch tool, which automatically removes blemishes, and the Content-Aware tool, which removes unwanted objects and matches the background with the surrounding area. If you want to adjust the colors of an image, you can use the Levels, Curves, or Color Balance controls to manually adjust them. If you want a faster way to perform color correction, the Auto Color and Auto Levels function automatically enhance images with a single click. While Photoshop includes many powerful built-in features, you can add even more capabilities to the program by installing plug-ins.

Photoshop is the image editor of choice among professionals, including photographers, graphic designers, and web developers. Its intuitive interface and wide range of features make Adobe Photoshop the best image editing program available.

When should we use Adobe Photoshop?

  • Raster-based design
  • Photo editing
  • Banner ads for the web
  • 3D images
  • Product mock-ups
  • Photo manipulation
  • Motion graphics
  • Photo filters
  • Artworks

What are raster photos formats (extensions)?

1) BMP Extension:

Short for “Bitmap.” It can be pronounced as “bump,” “B-M-P,” or simply a “bitmap image.” The BMP format is a commonly used raster graphic format for saving image files. It was introduced on the Windows platform but is now recognized by many programs on both Macs and PCs.

The BMP format stores color data for each pixel in the image without any compression. For example, a 10×10 pixel BMP image will include color data for 100 pixels. This method of storing image information allows for crisp, high-quality graphics, but also produces large file sizes. The JPEG and GIF formats are also bitmaps but use image compression algorithms that can significantly decrease their file size. For this reason, JPEG and GIF images are used on the Web, while BMP images are often used for printable images.

2) TIFF Extension:

Stands for “Tagged Image File Format.” It is a graphics file format created in the 1980s to be the standard image format across multiple computer platforms. The TIFF format can handle color depths ranging from 1-bit to 24-bit. Since the original TIFF standard was introduced, people have been making many small improvements to the format, so there are now around 50 variations of the TIFF format. So much for a universal format. Recently, JPEG has become the most popular universal format, because of its small file size and Internet compatibility.

3) JEPG Extension:

Stands for “Joint Photographic Experts Group.” JPEG is a popular image file format. It is commonly used by digital cameras to store photos since it supports 224 or 16,777,216 colors. The format also supports varying levels of compression, which makes it ideal for web graphics.

The 16 million possible colors in a JPEG image are produced by using 8 bits for each color (red, green, and blue) in the RGB color space. This provides 28 or 256 values for each of the three colors, which combined allow for 256 x 256 x 256 or 16,777,216 colors. Three values of 0 produce pure black, while three values of 255 create pure white.

The JPEG compression algorithm may reduce the file size of a bitmap (BMP) image by ten times with almost no degradation in quality. Still, the compression algorithm is lossy, meaning some image quality is lost during the compression process. For this reason, professional digital photographers often choose to capture images in a raw format so they can edit their photos in the highest quality possible. They typically export the pictures as JPEG (.JPG) images when they are shared or published on the web.

Besides image data, JPEG files may also include metadata that describes the contents of the file. This includes image dimensions, color space, and color profile information, as well as EXIF data. The EXIF data is often “stamped” on the image by a digital camera and may include the aperture setting, shutter speed, focal length, flash on/off, ISO number, and dozens of other values.

Disadvantages of the JPEG Format

While the JPEG format is great for storing digital photos, it does have some drawbacks. For example, the lossy compression can cause an issue called “artifacts,” in which parts of the image become noticeably blocky. This typically happens when a high compression setting is used to save the image. For saving small images and images with a lot of text, the GIF format is often a better alternative. JPEG images also don’t support transparency. Therefore, the JPEG format is a poor choice for saving non-rectangular images, especially if they will be published on webpages with different background colors. The PNG format, which supports transparent pixels is more ideal for these types of images.

NOTE: The Joint Photographic Experts Group, which the JPEG image format is named after, published the first JPEG specification in 1992. Since then, the organization has developed several variations of the format, including JPEG 2000 and JPEG XR. However, the standard JPEG format remains the most popular.

4) GIF Extension:

Stands for “Graphics Interchange Format.” GIF is an image file format commonly used for images on the web and sprites in software programs. Unlike the JPEG image format, GIFs uses lossless compression that does not degrade the quality of the image. However, GIFs store image data using indexed color, meaning a standard GIF image can include a maximum of 256 colors.

The original GIF format, also known as “GIF 87a,” was published by CompuServe in 1987. In 1989, CompuServe released an updated version of the format called “GIF 89a.” The 89a format is similar to the 87a specification but includes support for transparent backgrounds and image metadata. Both formats support animations by allowing a stream of images to be stored in a single file. However, the 89a format also includes support for animation delays.

Since GIFs may only contain 256 colors, they are not ideal for storing digital photos, such as those captured with a digital camera. Even when using a custom color palette and applying to dither to smooth out the image, photos saved in the GIF format often look grainy and unrealistic. Therefore, the JPEG format, which supports millions of colors, is more commonly used for storing digital photos.

GIFs are better suited for buttons and banners on websites since these types of images typically do not require a lot of colors. However, most web developers prefer to use the newer PNG format, since PNGs support a broader range of colors and include an alpha channel. (The alpha channel makes it possible for a single image with transparency to blend smoothly with any webpage background color.) Still, neither JPEGs nor PNGs support animations, so animated GIFs remain popular on the web.

NOTE: A GIF image can actually store more than 256 colors. This is accomplished by separating the image into multiple blocks, which each continue unique 256 color palettes. The blocks can be combined into a single rectangular image, which can theoretically produce a “true color” or 24-bit image. However, this method is rarely used because the resulting file size is much larger than a comparable JPEG file.

How to pronounce “GIF”

According to Steve Wilhite, the creator of the original GIF format, it is pronounced “jiff” (like the peanut butter brand). However, most people still pronounce it “gif” (with a hard G). Therefore, either pronunciation is acceptable.

5) PNG Extension:

PNG, which can be pronounced “ping” or “P-N-G,” is a compressed raster graphic format. It is commonly used on the Web and is also a popular choice for application graphics.

The PNG format was introduced in 1994 after the GIF and JPEG formats had already been around for several years. Therefore, PNG includes many of the benefits of both formats. For example, PNG images use lossless compression like GIF files, so they do not have any blurring or other artifacts that may appear in JPEG images. The PNG format also supports 24-bit color like the JPEG format, so a PNG image may include over 16 million colors. This is a significant difference between GIF and PNG since GIF images can include a maximum of 256 colors.

Unlike the JPEG and GIF formats, the PNG format supports an alpha channel or the “RGBA” color space. The alpha channel is added to the three standard color channels (red, green, and blue, or RGB) and provides 256 levels of transparency. JPEG images do not support transparent pixels and GIF images only support completely transparent (not partially opaque) pixels. Therefore, the PNG format allows Web developers and icon designers to fade an image to a transparent background rather than a specific color. A PNG with an alpha channel can be placed on any color background and maintain its original appearance, even around the edges.

While the PNG image format has many benefits, it is not suitable for all purposes. For example, digital photos are still usually saved as JPEGs, since PNGs take up far more disk space. GIFs are still used for animations since PNG images cannot be animated. Additionally, GIFs are still used on many websites since browsers only recently provided full support for the PNG format. However, now that most browsers and image editing programs support PNGs, it has become a popular file format for web developers and graphic artists.

What are vector images?

Unlike JPEGs, GIFs, and BMP images, vector graphics are not made up of a grid of pixels. Instead, vector graphics are comprised of paths, which are defined by a start and endpoint, along with other points, curves, and angles along the way. A path can be a line, a square, a triangle, or a curvy shape. These paths can be used to create simple drawings or complex diagrams. Paths are even used to define the characters of specific typefaces.

Because vector-based images are not made up of a specific number of dots, they can be scaled to a larger size and not lose any image quality. If you blow up a raster graphic, it will look blocky, or “pixelated.” When you blow up a vector graphic, the edges of each object within the graphic stay smooth and clean. This makes vector graphics ideal for logos, which can be small enough to appear on a business card but can also be scaled to fill a billboard. Common types of vector graphics include Adobe Illustrator, Macromedia Freehand, and EPS files. Many Flash animations also use vector graphics, since they scale better and typically take up less space than bitmap images.

File extensions: EPS, SVG.

What is the best editor for vector images?

Adobe Illustrator is an industry-standard drawing program used to create and edit vector graphics. Unlike Photoshop, Illustrator uses paths, rather than bitmaps, to create images. This allows the drawings to be altered and resized without losing image quality. Illustrator is commonly used in professional environments to create logos, signs, digital art, drawings, and other types of graphics.

What is Adobe Illustrator?

The Adobe Illustrator workspace includes a drawing canvas, known as an artboard, surrounded by various configurable toolbars and palettes. You can customize the workspace by hiding, revealing, and moving palettes to a preferred arrangement. You can also edit multiple artboards concurrently to
streamline document editing across drawings.

Illustrator includes advanced features, such as color blending capabilities for creating photorealistic gradients and global editing for modifying similar objects across multiple artboards at the same time. The program also provides more accessible Adobe fonts that you can preview and activate within Illustrator. The software supports a myriad of other convenience tools that make the graphics workflow more efficient.

Adobe Illustrator integrates with other Creative Cloud (CC) programs through the use of interchangeable file formats. It also opens industry-standard graphics files such as EPS, SVG.

If you are a drawing professional, you will find that it is hard to replace Illustrator with an alternative graphics editor. Its robust features and ability to help create clean, professional-quality graphics make Adobe Illustrator the right choice for serious vector art graphics professionals.

When should we use Adobe Illustrator?

  • Vector-based design
  • Logo & Branding
  • Illustrations
  • Maps
  • Text manipulation
  • Info-graphics
  • Patterns
  • Web Icon

What are vector images format (extensions)?

1) EPS Extension:

Stands for “Encapsulated PostScript.” EPS is a PostScript image file format that is compatible with PostScript printers and is often used for transferring files between various graphics applications. EPS files will print identically on all PostScript-compatible printers and will appear the same in all applications that can read the PostScript format.

As the name implies, EPS files contain PostScript code, which is used for storing font and vector image information. Vector images are usually drawings created by programs such as Adobe Illustrator and CorelDRAW. EPS files may also include a rasterized version of the image used for previewing the contents of the file.

2) SVG Extension:

The SVG format is an open standard developed under the W3C (World Wide Web Consortium), with Adobe playing a major role. SVG images can be created and exported from Adobe Creative Suite programs, such as Illustrator and GoLive.

The SVG format is not natively supported by Adobe Photoshop, Photoshop Elements, and InDesign. However, you can open SVG files in these programs using the SVG Kit for Adobe CS plug-in, which is developed by Scand.

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG files provide resolution independent, high-resolution dots per inch (HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The ability to style SVG with CSS and the support of scripting and animation makes SVG an integral part of the web platform.

 SVG is ideal for
interactive, data-driven, personalized graphics. It is a royalty-free, vendor-neutral open standard developed under the W3C (World Wide Web Consortium) process, and widely supported by modern web browsers.

Examples for Raster Photos vs. Vector Images