• Tutorials
• Web Design

How to Setup and Optimize Image-based WordPress Blog

WordPress is generally considered as a blogging platform. But besides blogging, you can do a lot more things – like building a link directory, starting a classifieds site or discussion forum, creating an online store etc. – with this incredible CMS. As WordPress is a very user-friendly CMS, you can also use it as a platform for creating an image-based website/blog.

Doesn’t matter whether you’re a professional photographer, web or graphic designer, or another kind of visual artist, WordPress gives you an excellent option for building any type of image-based site, whether it’s a professional portfolio or simple image gallery or an infographic site. There are a wealth of ready-made themes and plug-ins available around the web, using which you can get an effective WordPress image site up and running in a very short span of time.

While writing this article, we assume that you’ve complete knowledge about WordPress installation. If you’ve any confusion, we refer to WordPress official documentation on installing and configuring WordPress. In this post, first, we’ll talk about some WordPress Portfolio/Gallery Themes and Plug-ins, and later describe all the essential things to help you optimize your images for your WordPress blog/site.

So let’s move ahead.

WordPress Gallery/Portfolio Themes

First of all, you’ve to decide whether you want to use a pre-made theme or would like to design a custom theme. If you’re a web designer, you can design your own. But if you’re not, you can choose from a wide range of customizable themes that suits your needs. Some of them are free, while others are paid and less expensive rather than hiring a professional designer. Therefore let’s have a look at some free high-quality responsive WordPress Portfolio/Gallery themes.

Workality Lite:

Workality Lite is a free and fully responsive portfolio theme. Using this beautiful theme, you can showcase your work through four different thumbnail sizes: Small, Medium, Big, and Portrait. Because of its responsiveness, everything from text to video will scale down gracefully to all types of mobile devices.

Workality comes with “Works” custom post type that allows you to create your portfolio, along with creating blog posts using the default Post type. A custom 404 page is also included for helping your visitors to find their way out, in case they encounter an error while visiting your site. As it’s a free product, no official support is provided by its development team.

Pinboard:

Pinboard is another responsive WordPress theme that lets you elegantly show your content in a beautiful grid. It comes with a flexible, advanced, and multicolumn grid, which is powered by jQuery Masonry. It has a responsive layout optimized for commonly used devices: smartphones, tablets, desktops, and laptops. Other key features include multiple layout options, custom layouts, landing pages, fonts and page templates, advanced typography options, and audio/video playback.

Designfolio:

Designfolio is a fully customizable and responsive portfolio theme that scales perfectly to fit any screen size on smartphones, tablets, or computers. You can use it on multiple sites. Best of all, it has detailed video tutorials to help you learn how to do more with WordPress. You can further upgrade to its premium version if you want advanced features like a flex slider, multiple color schemes, a custom logo, etc.

Snaps:

Snaps is a beautiful responsive WordPress portfolio theme using which you can showcase photo galleries and portrait images. It’s fully customizable which means you can easily add favicon, logo, background/header image, widgets, pick custom fonts, and background colors and create custom menus. It comes with different post formats such as audio, video, quotes, galleries, links, images, and standard posts.

Gridly:

Gridly is a responsive and minimal portfolio theme designed for photographers and graphic designers. It has two color schemes and comes with amazing features like a simple options panel, logo upload option, widgetized footer, featured images, jQuery Masonry, and more.

WordPress Gallery/Portfolio Plug-ins

Using one of the above-given themes, you can create a fully functional WordPress image site within a few minutes. But if you already have an existing WordPress blog, then you can have a look at following WordPress plug-ins to turn your static blog into a dynamic WordPress gallery/portfolio site, without changing the existing theme.

NextGen Gallery:

NextGen Gallery is the most popular and highly recommended WordPress gallery plug-in through which you can create stunning WordPress photo galleries in a few minutes. It features a powerful engine that enables you to get images from your desktop to your WordPress site and manage them from a centralized location.

You can display your images in two front-end styles: thumbnail galleries and slideshows. Both of these styles come with a wide range of options for controlling size, style, transitions, timing, lightbox effects, and more. Other extra features include add/remove/sort/rearrange images, import metadata, batch upload, group galleries into albums, edit thumbnails, and more.

WordPress Portfolio Plug-in (WP Portfolio):

WP Portfolio plug-in lets you quickly and easily display your website portfolio on your existing WordPress blog through a single page, with automatically generated website thumbnails. To show off your portfolio, you just need to create a new page and paste [wp-portfolio] shortcode into it. You can customize the layout of your portfolio through CSS and HTML if required. If you’re showing your graphic design work, an option is also available for using a custom image instead of a screenshot.

Gallery:

Gallery is a simple WordPress plug-in through which you can implement as many as gallery pages you wish into your WordPress site. It allows you to upload multiple pictures and descriptions for a gallery, display them all on a single page, and view each of them separately. Furthermore, you can add high-resolution images. A premium version of this plug-in is also available to provide you with advanced features.

Awesome Filterable Portfolio:

Awesome Filterable Portfolio plug-in enables photographers, artists, and designers to create, customize and publish an attractive filterable portfolio, in which items can be filtered with cool image hover effects and smooth jQuery animations. It is available in four languages and is quite easy to use and customize.

Nimble Portfolio:

Using this powerful portfolio/gallery plug-in, you’ll be able to showcase your documents/videos/images/portfolio and group them well under tabs that are filterable. It uses jQuery to turn your ordinary portfolio into a cutting-edge gallery. Additionally, it has support for Youtube, Quicktime, and download Vimeo videos.

How to Optimize Your Image-based WordPress Blog

High-resolution images can tremendously affect your posts and site as a whole, but using optimized images can dramatically improve the performance of your site. If you optimize your images properly, it doesn’t only reduce the load time of your website but also can generate a huge amount of organic traffic from image-based search engines.

While publishing an article, most people focus on optimizing the text part for search engines, but they often forget to optimize the image part. And miss the traffic that had to come from Google Image Search. Since site performance is now a prominent factor for getting ranked higher in any search engine, image optimization must be your first priority. Whether you’re a professional blogger who uses images in blog posts or a photo blogger who shares experiences with HD images, all you need to learn is about optimizing your images without losing their quality.

To help you make your WordPress Images search engine friendly, here’re a few things that you must keep in mind.

Image File Size:

Most of the images take more space than expected which may affect your site speed. It’s quite simple: the smaller images you’ve on your site, the faster your site will load. Heavy images can make your web pages slow, which is bad from the SEO point of view and for your readers as well. Today’s users don’t wait for the site to load, before that they click the back/cross button and quit.

By default, WordPress gives you an option to re-size your images using the Post Editor. But the real fact is that it doesn’t resize your images. Instead, it just resizes them from larger to smaller in CSS or HTML. As a result, firstly browser loads larger images and then resizes them.

To avoid this issue, we recommend resizing your images to the desired size through an image editing program and then uploading them. Never use HTML or CSS to resize your images, rather use free applications like MS Paint for Windows and Preview for Mac OSX to do the same. Keep in mind that uploading a large image and presenting it in a smaller resolution on your site is nothing, but a wastage of bandwidth.

Image Formats:

Three image file formats are commonly used by people while uploading images to the internet: JPEG, PNG, and GIF. Let’s have a look at their uses:

• JPEG: Used for photographs and other types of images that have a large variety of colors.
• PNG: Used for simpler images like screenshots, logos, banners, and other computer-generated graphics.
• GIF: Used for animated images.

JPEG is a compressed file format, which means the quality of a JPEG image is degraded for providing a smaller size. On the other hand, PNG is an uncompressed format which means the file size of a PNG image may be larger, but the quality will be better than a JPEG file.

If the background of your image is transparent, then you should use PNG format as it is able to hold the transparency. Otherwise use JPEGs, if you wish to keep the image size smaller. Whatever format you use, try to keep a balance between the quality and size of the image file.

However, which file format you should use is not a serious issue, but if you’re really serious about reducing your page load time, then you must use the properly-sized image in the right format.

Image File Name:

Before you’re going to upload your image to your WordPress site, give it a relevant and descriptive name. As the filename plays a vital role in image optimization, keep the following factors in mind while naming your images:

• Avoid using only a single word or words together to name your images.
• Describe/Name the image well by explaining what the image is about. If possible, also add a geographic location.
• Use dashes/hyphens instead of underscores/pluses to split words, because Google assumes underscores as joiners and dashes as word separators. For Google:
• WordPress-Optimization = WordPress Optimization
• and
• WordPress_Optimization = WordPressOptimization

So wordpress-optimization.jpg is better than wordpress_optimization.jpg.

Most of the time, we give our images names like image001.jpg or pic.gif. That’s not really good practice. Avoid using generic filenames, as they aren’t very informative and deliver negligible information about images to the search engines. Also, never use extremely lengthy filenames, instead keep it simple, short, and to the point.

Alt Text:

Alt Text, which refers to Alternative Text, is the most important aspect of Image SEO. It is not only useful for your visitors to better understand your images but also used by search engines to find out information about your image.

When we see an image of a girl crying, we instantly guess what the image is all about. But search engine spiders don’t work like this. You (Human) can easily see the image of a crying girl, but search engines don’t have the ability to recognize the picture instantly. That’s why; you must help the spiders understand your images using the Alt Text.

As we all know, images take more time to load than text. If your connection is slow, it displays a blank space in place of an image. If you’ve not added any alt text to your image, then both your visitors and search engine bots can’t understand what’s happening to that blank space. So using alt text in your images is a must to give your visitors a reason to stay on your site, while an image is being loaded or not available.

In WordPress, you can easily add relevant alt text while you upload the image. However you can use important keywords in the alt text, but it’s strictly recommended to avoid keyword stuffing.

Captions:

A nice image caption can make your image more attractive, as it’s the most well-read part of your content on your site. As of right now, captions don’t affect your search engine ranking. But they are very helpful to lower your bounce rate because they satisfy the users with what they’re really looking for. So next time when you upload your images, don’t forget to use relevant captions.

WordPress Image Optimization Plug-ins

In addition to the above image optimization tips, here’re some recommended plug-ins that you can use. These plug-ins are not only helpful for optimizing your images but also extremely useful for decreasing the load time of your site and improving overall site performance.

WP Smush.it:

WP Smush.it is perhaps the most popular plug-in used by WordPress bloggers to reduce image file size without degrading their visual quality. It uses the Smush.it API within WordPress that performs multiple image optimization techniques automatically to remove unnecessary bytes from your images.

EWWW Image Optimizer:

This plug-in automatically optimizes your images using lossless optimization techniques, while you’re uploading them to your WordPress blog. The best thing is that you will also be able to optimize the images that are already uploaded. Also, it lets you convert your images to the file format that has the smallest size.

Hammy:

Hammy is another WordPress plug-in that can help you improve the speed of your WordPress site by generating smaller-sized images according to your content width. When a person visits your site, it automatically presents the smallest image to them. It’s quite useful for delivering a better experience for those users who’re using mobile devices.

* * *

Author’s bio details:

Ajeet Yadav

I am a professional web developer, associated with SeoSemanticXHTML, which provides high-quality PSD to HTML Conversion, and like to keep myself updated on the latest trends.

You can also follow me on twitter.