A brief guide to handling images on your WordPress website

WordPress, the largest CMS platform, is a home to many websites. It powers millions of websites around the globe and all kinds of individuals, businesses, and organizations use it to build and manage their online presence.

In fact, creating websites on WordPress is a breeze, just like it is super easy to create WordPress mobile apps on AppMySite. It is the best platform for people who want to create a stunning and professional website for their brand, blogging business, eCommerce site, education website, or more.

WordPress enables integration with hundreds of themes and plugins, thereby making the platform highly flexible, compatible, and adaptable according to various needs and demands. This also enables the extension of functionalities and features for any given website.

However, the two basic things that your users come across when browsing your website are images and content. You must ace in these two departments if you wish to make the perfect impression on your customers, and reap most of the opportunities coming your way.

If you have been struggling with images on the WordPress platform, then you have landed at the right place. Today we will help you learn about the basics of managing your images on WordPress. Stay tuned with us till the end and know all about it!

The significance of image optimization on WordPress

Images do more than just conveying graphical messages, or enhancing the overall aesthetics of the website. Go through the points listed below and know about the significance of images and the effect of their optimization on your website:

#1: Affects page load speed:

Images contribute to a synchronous loading of elements. Large sized images can affect the load speed of your website. Thus, it is preferred to use lazy loading to load images after the critical content is loaded.

#2: Determines user experience:

Images convey a lot of your significant information in a more impressive and impactful manner. It can also make significant content noticeable that can otherwise go unnoticed in text or other formats. The kind of images you use, and how it affects your website performance, can determine the experience of your visitors, and affect your conversion rate.

#3: Optimizes SEO:

An optimized and useful image can rank in the image searches on Google. Besides, if it affects the performance of your website, it can also affect your SEO merits. Therefore, ensure that you pick the right images, place them in the right form and optimize it in order to make it SEO friendly.

Know how WordPress handles your images

Let us now tell you how WordPress handles the images that you upload on its platform. When it comes to storage, WordPress stores your images in the Media Library. You can view all your uploaded images under Media >> Library.

There a search box on the right where you can find your uploaded image file. Type in related key words you used in the title, caption, or description to find the image you are looking for. However, in order to find the folder where your images are stored, i.e., wp-content/uploads/, you will need to use an FTP/SFTP client.

If you have chosen to sort your content by dates, then based on your setting there will be multiple directories with the images marked by the date of the upload. Advanced users also create custom folders for storing their images.

Now the question is, what happens when you upload an image to WordPress?

As soon as you upload an image, WordPress creates copies of those image in different sizes, other than your upload. Therefore, for every image you upload, you get the following:

Thumbnail
Original sized image (As uploaded by you)
Medium sized image
Large sized image

This is done to serve the right image based on your visitor’s reception strength. Hence, WordPress manages to show the most appropriate image based on the visitor’s device type, internet speed and bandwidth, and other relevant factors. You can do this manually as well, but that is just too much work.

WordPress also enables lazy loading so that the other critical assets on the website page are loaded first, followed by the images. This helps in optimizing the speed and performance of your website and boosting the experience of your users.

WordPress image type & size guide: Find what fits the best

Images will serve their purpose best when served in the right type and size. Besides quality and relevance, you should also focus on these two factors as it can affect the overall experience of your users.

Let us first guide you with the right image type. By image type, we mean the type of file or extension that your image is saved in.

The most commonly used file types and their best use cases are as follows:

JPEG: JPEG is one of the most commonly used image formats. It works for almost all kinds of images except logos, line drawings or those images that have a transparent background. In other cases, you can use this file format as you can get high quality images is small sizes.
PNG: Use PNG images if you are not implementing a large color palette, using a substantial amount of text or want images with a transparent background. PNG images ensure great aesthetic quality, but the file size can get comparatively bigger.
GIF: GIFs are best if you do not want a still image but also do not require a video. It makes your images animated and dynamic, and adds an eye-catching appeal to it making it livelier. The files can be compressed but the color range is limited.
TIFF: If size is not an issue and image quality is your priority, then TIFF file format is the best for you. If images play a major role in your conversions, you must go with this format. This is ideal for photography websites.

Now let us tell you about the optimum size for each image type. As per the default settings or WordPress standards, the images follow the size specifications, as discussed below:

Thumbnail: Squared image with 150px size at max
Original: The size in which it is uploaded
Medium: Maximum image size is 300px
Large: Maximum image size is 1024px

As discussed above, the standard size specifications must be followed when uploading the images to WordPress. It is recommended to use the biggest size when you upload an image as WordPress will compress it when needed.

Adding custom sized images to your WordPress website

Each business is unique and so is each website. Hence, sometimes you may need to add custom sized images to your WordPress website. It also imparts flexibility and saves the time you may otherwise need to spend resizing the images.

There are some plugins that can be put to use for adding custom sized images. However, if you wish to do this manually, you can still achieve good results. You can manage the settings in the Appearance section of your WordPress dashboard. This can get tough if you are not very well-versed with the code block editor. We suggest getting a professional’s help for the same.

For special use cases, you can also change the default image sizes manually as required, under Settings >> Media Settings. Here, you can set the width and height for each file type (Thumbnail, Medium, Large). Just enter your desired values, click on Save Changes and you will be good to go.

Depending upon your needs and suitability, you can also use image compression (shrinking an image in terms of size) or cropping (cutting out parts of images) tools to fulfil your requirements. For making basic edits to an image, you can also use the built-in editor by WordPress.

The WordPress built-in image editor is suitable for occasional use. Go to the Media Library and click on the image you need to edit. Here, you can also add the Alternative Text, Title, Caption, and other details to the image. Next, click on the Edit Image button located below the image to open a plethora of editing options for customization.

You can view your original dimensions in the Scale Image section and make changes to them. You can also click on the Scale button to make automated changes. Else, you can also click on the Restore Original Image option if you do not like the automated changes.

Best practices & tips for image handling on WordPress

In this section we will share some additional tips and strategies that you can implement to win in the image department. Let us begin:

#1: Pick the right file type as per your need

We have described the significance of different kinds of image files above. You can pick the right type based on your requirements.

Pick the right file type or image format and upload it on the platform. Use suitable editing tools if necessary, and give your images the edge they deserve.

#2: Upload high-quality full size images

As recommended above, upload full size images that or of high quality as the file you upload will be treated as the yardstick to increase or decrease size. WordPress will serve the best size to your users, so you do not really need to worry about that.

However, you need to remember that size does not always determine quality. So, do not exert unnecessary pressure on your website by uploading large images everywhere and anywhere. In fact, learn the art of optimizing it as necessary.

#3: Add necessary meta information cautiously

The information you add to your image contributes to its discoverability and backs your SEO practices. Therefore, do not use the space as a filler and write the content smartly.

File Name: Treat your file name as a keyword or relevant tag for the image. Do not name your file vaguely like abcd_001. Instead, use standard tags, words, and alphanumeric descriptions.
URL: Optimize the URL of the image and add a standard and identifiable text to it. For instance, if your image appears in the search on Google, the URL should not look like a random text.
Title: Just like your file name, your image title should also be optimized as per a suitable keyword. However, ensure that it is related to the image. For instance, if it is the image of a dress then the title should describe the same.
Caption: A caption is a small description of the image and should be treated and written accordingly. Write a short and concise but compelling caption for your image in five to ten words.
Alt text: Alt text or alt attributes are used to tell visually impaired people what the image is all about. It also functions as the alternative and descriptive text when the image fails to load, or defers. At other times, it remains hidden. However, it has a crucial role to play in your website’s SEO and ranking. Use a keyword in an alt tag only when relevant and do not stuff it. Try to be as descriptive as possible in only a few words. You can include important information like reference or model number, if any.
Description: This is the space where you can add the detailed information about your image. While the content here can be lengthy as compared to other sections, do not try to write a story unless required. Use to-the-point crisp words that convey your message and inform the visitors whatever they need to know.

#4: Optimize for better performance

We have discussed the significance of image optimization at the very start of this blog. Practice optimization for your images and make them more adaptable and SEO friendly.

This will contribute to the load speed and performance of your website and reduce abandonments. Offer a rich and frictionless experience to your users and earn more conversions and session time.

#5: Always keep the mobile users in mind

Mobile phone users are dominating every sphere and industry. From eCommerce to education, hospitality to entertainment, and lot more, it is the mobile phone users who have the biggest contributions when it comes to digital consumerism.

Therefore, you must keep the smartphone users in mind when designing and uploading images. It should be optimized for various kinds of mobile devices. You can also design an app for your website that complements it and offers a more seamless experience to your consumers.

Have an aesthetic website? Now build a stunning app!

It is the age of smartphones, and most people use their mobile devices for discovering content, products, services, and more. In fact, even websites are browsed on mobile phones and people look for the mobile apps of the brands that they get invested in.

Clearly, mobile apps have become a necessity for any brand or organization. We believe that every website deserves an equally great app, irrespective of the scale of the business.

Therefore, AppMySite mobile app builder enables everyone to create premium apps without burning a hole in their budget. In fact, it is the best in the league for creating WordPress and WooCommerce apps.

AppMySite democratizes mobile app development and brings the power of app creation at your fingertips. It provides a DIY and absolutely code-free environment to customers willing to create premium native apps with the option of enabling web-view functionality for given screens and pages.

The DIY Android and iOS app maker is the perfect and the most wholesome solution for businesses looking to expand their horizon and enter the mobile app industry without much hassle. So, what are you waiting for? Go ahead and app your way to success now!

Main Website