First impressions matter a great deal when it comes to the appearance of your website. With MH Magazine you can create aesthetically pleasing WordPress websites with the minimum of effort. The use of high quality images is quite possibly the most important aspect of your websites' aesthetics as images have the power to instantly grab the attention of visitors like no other content element.
MH Magazine and professional-grade imagery work hand-in-hand in providing you a professional-looking, modern and extremely responsive website. This is why it's of the utmost importance to use the correct images for your site contents. Besides, this also ensures that you are using great-looking optimized images that look fantastic on all desktop platforms and mobile devices. Let's see how to completely optimize your images for use with the popular MH Magazine WordPress theme.
Common mistakes when uploading images for MH Magazine
IMPORTANT: How do you know that you've uploaded images which are not suitable for MH Magazine?
- Slider oddly resizes – your slider keeps resizing depending on the shown image.
- Bad image quality – your images have bad quality and are pixelated or blurry.
- Wrong image sizes – your images appear far too large or too small on your website.
When using the MH Magazine theme, a very common mistake users can make when administering their WordPress websites is to upload images with the wrong image format. Two further common mistakes are when uploading images with too small image sizes or the wrong aspect ratio. Let's have a look at these common mistakes in detail – improper image format, aspect ratio and image sizes.
Image formats – landscape vs. portrait
MH Magazine is optimized to use Landscape images, like it's common for most modern online magazines and news websites. So when you're adding featured images to your posts, always use large rectangular images for best results. Using Portrait images within a landscape-orientated content slider may force WordPress to crop out large portions of the uploaded image in order for it to generate an optimally sized image for use within the theme. Check this example between both landscape and portrait formats of the same image while using the MH Slider widget.
Landscape Image – As you can see right below, using a landscape-orientated image that meets the recommended optimal dimensions produces high-quality results with no unwanted disfigurements:
Portrait Image – Whereas, when using a portrait-orientated version of the exact same image, you can quickly see how it is affecting the overall appearance of your website in an unwanted way:
The differences are immediately noticeable with the main subject of the image being partially cropped out of view, along with an excessive amount of zoom. The height of the slider widget is also being increased due to the theme attempting to maintain a consistent image aspect ratio of 16:9.
Image size and aspect ratio
Which brings us to image size and aspect ratio. This is another issue you may struggle with when trying to upload suitable images to your website. Thumbnails in MH Magazine have certain image ratios, depending on where they are being shown – e.g. on archives, posts or within widgets.
IMPORTANT: Recommended image sizes depending on which slider size (large / normal) you are using.
- If you're using the large, full-width slider on your widgetized front page in the Home 1 widget area, the optimal size of your featured images should be at least 1030 x 438px.
- If you're using the smaller slider on your widgetized front page in e.g. the Home 2 widget area, the optimal size of your featured images should be at least 678 x 381px.
It's recommended to upload images with a 16:9 aspect ratio which is the most commonly accepted standard ratio for todays digital media devices. For the large slider in MH Magazine, WordPress will generate a thumbnail with 1:2.35 aspect ratio, which is slightly different to reduce the height of the image. In general, when you upload images, WordPress will generate suitable thumbnails which will be displayed nicely on your posts, archives, within custom widgets and so on.
If you're selecting images that don't meet at least the recommended image dimensions, you will encounter some undesirable stretching, squashing and cropping effects on your images, also usually along with a dramatic decrease in image quality, as shown in the example image below:
Not only has the image the wrong image format (portrait format) causing the slider to be much larger in height than what is intended, but the image size of the featured image within the slider is far less than the optimal dimensions, resulting in a low quality and blurred image. This lethal combination can instantly effect that all-important first impression you should be wanting to make on your visitors. That's why it's important to upload images that are suitable for modern websites.
How can you edit your images?
First of all keep in mind, that it's highly recommended to always upload images that meet at least the recommended image sizes. If you upload images that are larger than recommended, that's fine. But if you're uploading images which are simply too small, then there is of course no way to edit them to become larger without the image loosing in quality.
We've mentioned the recommended image size for MH Magazine further above within this article. In case you're using a different WordPress theme by MH Themes, then please see the particular theme documentation for recommended image sizes in your WordPress theme.
If you upload large images, there usually is no need for further edits, because WordPress will automatically generate suitable thumbnails. However, in case you want to modify your images, you certainly don't need to spend money on additional software. There are lots of free resources available to you, with one being built right into WordPress itself. Almost certainly an under-used feature of WordPress is its built-in image editor, which you can access by selecting any of your images from within your Media Library and clicking on the Edit Image button.
This will open a very simple, yet more than adequate image editor that allows you to carry out a variety of operations on your chosen image. You can thus crop, rotate, rescale, resize, and flip the selected image using the tools provided by the built-in image editor in WordPress. Get some more information and guidance from this tutorial on how to edit media within your WordPress dashboard.
If you're looking for a professional software solution, there are Photoshop-alternatives available at your disposal and free of charge. For example Gimp and PaintNet. Both of these free software programs allow you to carry out many modern image manipulation tasks with ease. Besides, you can look for suitable WordPress plugins to optimize, modify or edit your images in WordPress.
Conclusion: Optimal images for usage with MH Magazine
Using professional-grade imagery on your WordPress website sounds expensive. Yet, it doesn't necessarily need to be as there is a wide range of royalty-free images available to you that you can freely use on your WordPress website. The term Royalty Free doesn't necessarily mean the image is available to you free of charge. However, you have to dig a little deeper to find actually free royalty free imagery, with these free image sources leading the way.
Adhering to the above mentioned pointers and best practices within this article will ensure you're making a positive impression on your website visitors. The MH Magazine WordPress theme is a comprehensive creation that presents your content and images in a beautiful and well-organized way. MH Magazine is one of the most popular magazine and news themes available for WordPress, leaving you to take care of the content and take your website to the next level.
More extensive information, basic tutorials and useful sources on images can be found here:
- Basics of Images in WordPress
- How to use featured images in WordPress
- Solving issues with images on your WordPress website
- Solving HTTP errors when uploading images in WordPress
- How to embed images in WordPress plus adding a caption
- How to create a clickable background image in WordPress
- 5+ Best Image Optimization Plugins for WordPress Images
- 5 Tips for Enhancing Your WordPress Images
- 10 Image Sources For Your WordPress Website Or Blog
- How to fix issue with changing image sizes in slider