Categories
Website

How to Easily Optimize Images for Web (without Losing Quality)

Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?

When starting a new blog, many beginners simply upload images without optimizing them for web. These large image files make your website slower.

You can fix this by using image optimization best practices as part of your regular blogging routine.

In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.

How to Optimize Your Images in WordPress (Step by Step)

Since this is a comprehensive guide on image optimization for web, we have created an easy to follow table of content:

What is Image Optimization? (Optimized vs Unoptimized Images)

Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.

While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Here’s an example of optimized vs unoptimized image:

Optimized vs Unoptimized Images in WordPress

As you can see, when optimized properly the same image can be 75% smaller than the original without any loss in quality.

How does Image Optimization work?

In simple terms, image optimization work by using compression technology like “Lossy” and “Lossless” which helps reduce the overall file size without any noticeable loss of quality.

What does it mean to Optimize Images?

If you ever received a recommendation to optimize images by your WordPress hosting support or by a speed test tool, then all it means is that you need to reduce the file size of your images by optimizing them for web.

Why is Image Optimization Important? What are the Benefits of Image Optimization?

While there are many benefits of optimizing your images, below are the top ones that you should know:

  • Faster website speed
  • Improved SEO rankings
  • Higher overall conversion rate for sales and leads
  • Less storage and bandwidth (which can reduce hosting and CDN cost)
  • Faster website backups (also reduces cost of backup storage)

Outside of video, images are the next heaviest item on a web page. According to HTTP archive, images make up on average 21% of a total webpage’s weight.

Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

Now you might be wondering how big of a difference can image optimization really make?

According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

How speed affects your website

If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster loading websites.

This means that by optimizing your images for web, you can both improve website speed and boost WordPress SEO rankings.

How to Save and Optimize Images for Web Performance?

The key to successful image optimization for web performance is to find the perfect balance between lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

  • Image file format (JPEG vs PNG vs GIF)
  • Compression (Higher compression = smaller file size)
  • Image Dimensions (height and width)

By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more details.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only.

For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.

Although it’s a bit manual, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them. Many beginners and even large corporations prefer to use these image optimization plugins because it’s easy and convenient.

We will share more about these WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.

Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using an image editing software on your computer.

For example, we optimized a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.

We chose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Best Image Optimization Tools and Programs

As we mentioned earlier, most image editing software come with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, specially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantee the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for the web. Simply open your image and click on the “File » Save for Web” option.

This will open a new dialog box. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom left.

Saving images optimized for the web using Photoshop

GIMP

GIMP is a free and open source alternative to popular Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.

First, you need to open your image in GIMP and then select File » Export As option. This will bring up the save file dialog box. Give your file a new name and then click on the export button.

Export image in GIMP

This will bring up image export options. For jpeg files, you can select the compression level to reduce file size. Finally, click on the export button to save the optimized image file.

TinyPNG

TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG files. All you have to do is go to their website and upload your images (simple drag & drop).

Using TinyPNG to optimize images for WordPress

They will compress the image, and give you the download link. You can use their sister website, TinyJPG, for JPEG image compression.

They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it combines the best of TinyPNG and TinyJPG inside Photoshop.

For developers, they have an API to convert images automatically, and for beginners they have a WordPress plugin that can automatically do it for you (more on this later).

JPEG Mini

JPEGmini uses a lossless compression technology which significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.

JPEGMini online image compression tool

You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

ImageOptim

Windows alternative to this is Trimage.

Best Image Optimization Plugins for WordPress

We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.

Below is our list of the best WordPress image compression plugins:

  1. Optimole – popular plugin by the team behind ThemeIsle.
  2. EWWW Image Optimizer
  3. Compress JPEG & PNG images – plugin by TinyPNG team mentioned above in the article.
  4. Imagify – plugin by the popular WP Rocket plugin team.
  5. ShortPixel Image Optimizer
  6. WP Smush
  7. reSmush.it

Using any of these WordPress image optimization plugin will help you speed up your website.

Final Thoughts and Best Practices for Image Optimization

If you’re not saving images optimized for web, then you need to start doing so now. It will make a huge difference on your site speed, and your users will thank you for it.

Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.

Outside of image optimization, the two things that will significantly help you speed up your website is using a WordPress caching plugin and using a WordPress CDN.

Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.

We hope this article helped you learn how to optimize your images in WordPress. You may also want to see our guide on how to improve your WordPress security and the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Categories
Website

How to Create a Filterable Portfolio in WordPress (Step by Step)

Do you want to add a filterable portfolio in WordPress? A filterable portfolio allows users to sort items in your portfolio based on tags. This helps you showcase different styles of your work, and your users can discover items that interest them. In this article, we will show you how to easily create a filterable portfolio in WordPress.

How to create a filterable portfolio in WordPress

Why Create a Filterable Portfolio in WordPress?

Normally, most photographers and designers just create a beautiful portfolio showing their best photographs. However sometimes those looking to hire you may want to see if you have done something similar before.

For example, someone looking for a fashion photographer may want to see your work in fashion.

Example of a filterable portfolio gallery

Adding filters to your portfolio allows you to show your work under different tags. It also helps your users to easily sort items in your portfolio.

Having said that, let’s take a look at how to easily create a filterable portfolio in WordPress without writing any code.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Creating a Filterable Portfolio in WordPress

First, you will need to install and activate the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Envira Gallery is one of our premium WordPress plugin, and you will need at least the silver plan to access the tags addon.

Upon activation, you need to visit Envira Gallery » Settings page to enter your license key. You can get this information from your account on Envira Gallery website.

Add Envira Gallery license key

Next, you need to install the tags addon. Head over to Envira Gallery » Addons page and locate the tags addon.

Installing tags addon

Click on the install button and Envira Gallery will fetch and install the addon for you. You will still need to click on the Activate button to start using the addon.

Activate addon

Now you are ready to create your filterable portfolio.

Head over to Envira Gallery » Add New page to create your first gallery.

Upload your photographs

Click on ‘Select files from your computer’ button to upload your photos. You can also click on ‘Select files from other sources’ button to select files from WordPress media library.

Envira will now upload and insert files into your gallery. Once it’s done, you can scroll down to see your images.

Edit an image in your gallery

Now you need to click on the pencil icon to edit an image. This will bring up a popup where you can add the tags and other metadata to your photos.

Add tags to your photos

Enter the tags you want to assign to this photo. You can add multiple tags separated by comma.

Once done, click on the save metadata button to store your tags.

Now you need to repeat the process to add tags to all images in your gallery.

After adding tags to your photos click on the tags tab on the left. This is where you can enable or disable tag-filtering for your gallery.

Enable filtering for your gallery

You need to check the box to enable tag filtering, and you will be able to see settings for this option.

You can show tags above or below the gallery, show all tags or select tags to show, and configure other display settings.

Once you are done, click on the publish button to make your gallery live.

Your portfolio gallery is now ready to be added to your site.

You can now create a post or page where you want to display your filterable portfolio. On the post editor screen, click on the ‘Add Gallery’ button.

Insert gallery into WordPress posts and pages

This will bring up a popup where you can select the gallery you just created and insert it into your WordPress post and page.

You can now update your post or page to save your changes and preview your website to see your filterable portfolio in action.

Preview of a filterable portfolio gallery

We hope this article helped you add filterable portfolio in WordPress. You may also want to see our WordPress tutorials such as how to speed up WordPress by saving images optimized for the web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Categories
Website

WPBeginner Turns 8 Years Old

Today is July 4th which means WPBeginner is officially 8 years old — feels unreal to type this!

Like every year, I want to take a few minutes and do a quick recap of all the major things happening in business as well as my personal life.

WPBeginner turns 8

WPBeginner Story

I started using WordPress when I was 16 years old and started WPBeginner at age 19 with a single mission: make WordPress easy for beginners.

Since then WPBeginner has become the largest free WordPress resource site for beginners.

For those of you who’re new, you can read the full WPBeginner story on our about page.

Personal Updates

New Dad life — Solomon is 8 months old and is quite fun. I used to think that I was good at delegating, but I think being a parent has forced me to push it to a new level.

Solomon Balkhi

Completely out of the blue, I got invited to have dinner with the United States Treasury Secretary, Steven Mnuchin. The dinner was held at the Treasury building, and it was humbling to be in the company of several national leaders and top entrepreneurs like Shahid Khan, the owner of Jacksonville Jaguars.

U.S. Treasury Secretary Dinner

I also received the Technology Award from the Pakistani News Channel (GeoTV) where I sat down and got to chat with the new Ambassador of Pakistan for United States.

GeoTV Award

WPBeginner Updates

Thanks to you all, WPBeginner has continued to grow in double-digit percentage (year over year). There have been several notable updates from last year, that I’d like to highlight.

1. New WPBeginner Redesign

In November 2016, we launched our new website design. It came with a lot of improvements, most importantly: our mega guides which I promised in the last year’s update.

We now have comprehensive guides on how to speed up WordPress, improve WordPress security, boost WordPress SEO, how to create an online store, how to make a website, and more.

We are working on creating more mega guides in the coming months.

2. Better WPBeginner Infrastructure

Since the redesign, I have gotten several emails asking about the secrets behind WPBeginner’s fast speed.

WPBeginner Speed

The answer is: infrastructure.

As WPBeginner grows, we need to continuously invest in our server infrastructure. This past year, I worked with the team at HostGator to build a completely custom infrastructure for WPBeginner that’s spread across multiple data-centers to ensure high availability.

I have been a HostGator customer since 2007, and WPBeginner has been hosted with them since day 1 (see my full HostGator review). I want to thank David, Patrick, Matt, Yannis, Chris, Taylor, Mike, Alfred, and the entire team that helped with the upgrade.

We are using Sucuri as our firewall, and MaxCDN as our CDN provider both of which play a tremendous role in our overall website speed.

Last but not least, we’re using DNSMadeEasy as our DNS provider because they’re one of the fastest in the industry.

3. WPBeginner on YouTube

Our YouTube channel has continued to prosper as we add new videos every week. We now have over 62,000 subscribers and 8.2 million video views (this is double what we had last year).

If you haven’t subscribed yet, then please go ahead and subscribe to WPBeginner on YouTube (it’s free). My goal is to pass 100,000 subscribers by the time I write this post next year.

4. Weekly Showcases

Over the last several years, we have continuously gotten requests for theme showcases. That’s why this year, we made it a goal to do weekly showcases on Fridays.

So far it has worked out great, and we look forward to doing more showcases.

Product Updates

Just about every week, I get an email from a reader saying: “I didn’t know WPBeginner was behind that product”. Now we even have a products page in the main menu.

Our suite of WordPress plugins are now running on over 3 million websites. Below are some of the most notable updates:

WPForms

We launched WPForms, a drag & drop form builder last year with a goal to make the most beginner friendly WordPress form plugin. I think we’re doing a pretty darn good job.

It has passed over 1.1 million downloads and is actively running on over 300,000 websites. Best part is that we have an average rating of 4.9 out of 5 with over 652 five-star reviews.

You can download it for free from the WPForms website or from the WordPress.org plugins directory.

Please give it a try, so you can see why so many people love it!

MonsterInsights

Last year, we acquired the most popular Google Analytics plugin for WordPress from Yoast and rebranded it to MonsterInsights. I’m really proud of the updates that we have made specially the Enhanced Ecommerce Tracking, Affiliate link tracking, and more.

If you’re a serious business owner, then check out the MonsterInsights Pro version because it will help you unlock really valuable data in your Google Analytics, so you can take your business to the next level.

OptinMonster

OptinMonster is our flagship product, and we recently announced version 4.0.

The new update included a new dashboard, sub-accounts + permission control, better design workflow, and so much more.

OptinMonster helps you grow your email list by converting abandoning website visitors into subscribers. If you’re not using it, then you’re missing out on subscribers.

Envira Gallery

Envira Gallery passed over 100,000 active installs this year. It’s the most powerful WordPress gallery plugin that’s actually fast and easy to use.

We have over two-dozen addons ranging from featured content gallery to WooCommerce to Lightroom. I’m really excited about the next version of Envira that our team is working on.

Our School in Cambodia

I started a tradition 3 years ago when we built our first school in Guatemala. After building 3 schools in Guatemala through Pencils of Promise, Amanda and I wanted to contribute in a different region.

My friend Neil Patel introduced me to Bill and Nancy from the Cambodian Village Fund. Thanks to their awesome work, we were able to build a primary school in Cambodia. While I wasn’t able to attend the opening ceremony because Solomon is so young, I definitely look forward to going there in the future.

Cambodian Village Fund

Thank You Everyone

I want to say thank you to everyone who has supported us in this journey. I really do appreciate all of your retweets, personal emails, content suggestions, and the in-person hugs / interactions at the events.

You all are AMAZING and without you, there is no WPBeginner.

I look forward to another solid year ahead of us.

Syed Balkhi
Founder of WPBeginner

P.S. We’re hiring a full-time (remote work) WordPress Plugin Developer and a Technical Support specialist. If you or someone you know would be interested in being part of our fast-growing team, then please apply here.



Source link

Categories
Website

How to Create Custom WordPress Layouts With Elementor

Want to create your own custom page layouts in WordPress? Elementor is a drag & drop WordPress page builder that allows you to easily create custom WordPress layouts without having any coding knowledge. In this article, we will show you how to easily create custom WordPress layouts with Elementor with just a few clicks.

How to Create Custom WordPress Layouts with Elementor

Why and When Do You Need Custom WordPress Layouts?

Many free and premium WordPress themes come with multiple layout choices for different kind of pages. However, sometimes none of these layouts would meet your requirements.

If you know how to code in PHP, HTML, and CSS, then you can create your own page templates or even build a child theme for your site. However, majority of WordPress users are not developers, so this option doesn’t work for them.

Wouldn’t it be great if you could just create page layouts using a drag and drop interface?

This is exactly what Elementor does. It is a drag and drop WordPress page builder plugin that allows you to easily create your own custom WordPress layouts without any coding skills.

It has an intuitive user interface that lets you build custom layouts with a live preview. It comes with many ready to use modules for all kind of web design elements.

There are several professionally designed templates that you can instantly load and use as a starting point. It works with all standard compliant WordPress themes and is compatible with all popular WordPress plugins.

Having said that, let’s take a look at how to create custom WordPress layouts with Elementor.

Getting Started with Elementor

First you will need to purchase Elementor Pro plugin. It is the paid version of the free Elementor plugin and gives you access to additional features and 1 year of support.

Next, you will need to install and activate the Elementor plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Elementor » Settings page to configure plugin settings.

Elementor settings

Here you can enable Elementor for different post types. By default, it is enabled for your WordPress posts and pages. If you have custom post types on your site, then those will also appear here, and you can enable them as well.

You can exclude or include user roles that can use Elementor when writing posts or pages. By default, it is enabled only for administrators.

Don’t forget to click on the save changes button to store your settings.

Creating Custom WordPress Layout with Elementor

First you need to create a new page (or post) on your WordPress site. On the post edit screen, you will notice the new ‘Edit with Elementor’ button.

Edit with Elementor button

Clicking on it will launch the Elementor user interface where you can edit your page using Elementor’s drag and drop page builder.

Elementor builder interface

Now you can add sections and build your page from scratch, or you can add a template.

Templates are a faster way to quickly get you started. Elementor comes with several professionally designed templates that you can customize as much as you want.

Let’s start with a template by clicking on the ‘Add Template’ button.

This will bring up a popup where you will be able to see different templates available. You should look for a template that is similar to what you have in mind for your page layout.

Select and insert a template

Now click to select the template you like and then click on the ‘Insert’ button to add it to your page.

Elementor will now load the template for you.

You can now start editing the template to match your needs. Simply point and click on any element to select it, and Elementor will show you its settings in the left column.

Editing an item in Elementor

Now let’s talk about how Elementor layouts work.

Elementor layouts are built using sections, columns, and widgets. Sections are like rows or blocks that you place on your page.

Each section can have multiple columns and each section and column can have its own styles, colors, content, etc.

Editing sections and columns in Elementor

You can add anything in your columns and sections using Elementor widgets.

These widgets are different kind of content blocks that you can place in your Elementor sections.

Simply select a widget and drop it into your section or column. There is an extensive set of widgets available that cover all popular web design elements that you can think of.

Elementor Widgets

You can add images, text, headings, image galleries, videos, maps, icons, testimonials, slider, carousels, and so much more.

You can also add default WordPress widgets and even the widgets created by other WordPress plugins on your site.

Once you are done editing, you can click on the Save button to save your changes.

Save and exit Elementor

Note: Saving a layout will not publish the page on your WordPress site. It will just save your page layout.

You can now preview your page or go to WordPress dashboard.

This will bring you back to the WordPress post editor. You can now save your WordPress page or publish it on your website.

Publish page

Creating Your Own Templates in Elementor

Elementor allows you to save your own custom layouts as templates. This way you can reuse your own templates to create new pages even faster in the future.

Simply edit the page you would like to save as a template with Elementor.

In the Elementor builder interface, click on the folder icon next to the save button and then select ‘Save template’.

Save your template

This will bring up a popup where you need to provide a name for your template and click on the save button.

Template name

Next time you are creating a custom page layout, you would be able to select it from the ‘My Templates’ tab.

Custom template

You can also export this template and use it on other WordPress sites using Elementor.

You will need to visit Elementor » Library page to see your saved templates. Take your mouse over to your template name and then click on ‘Export template’ link.

Export template

After downloading your template file you can go to the library page on another WordPress site using Elementor and then import your template.

That’s all for now.

We hope this article helped you learn how to create custom WordPress layouts with Elementor. You may also want to see our step by step guide on how to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link