Using Images In WordPress
Select A Topic Below, or Scroll Down to Navigate this Post
Introduction
Whether you own an agency, a small business, or an eCommerce site, you are going to be constantly uploading content to your site. This is how most websites gain traction and ultimately how you will be capturing your audience’s interest. Before we upload any images to our site, we must be aware of three key characteristics: format, size, and compression. The better we understand these things, the better we will get at uploading images to our site. This later-on reflects on important aspects of our website such as loading time and even SEO!
This guide assumes you already know how to upload an image onto WordPress.
When to use each Format
There are three main formats that you will be interested in when uploading an image to your website. These are JPGs, PNGs, and GIFs. Each of these serve an important role in your website, and it is highly advisable that you pay due consideration at an image’s format before you use it.
JPGs
JPG is the most widely used compressed image format for on the Internet. A compression ratio of 10:1 can be applied in JPG images without losing significant details. Because of this, they are a lot smaller in size than other images, and will be your default image format. This is your go-to.
PNGs
PNGs have very little compression compared to JPGs, making them larger in size. However, one main advantage is that they include transparency data. This allows for see-through images, which are usually great when displaying logos or other vector files (take a look at the SignalBoost logo at the header). You will use it primarily when working on visual elements for your website.
GIFs
GIFs offer transparency and animation. It is a very clean way to show animation without the large files associated with video.
Size & Ratio
When uploading images onto your site, you must have an understanding of where you want that image to go. You will also likely have to ask yourself whether the place you want to put your image in will actually a) make contextual sense, and b) be displayed correctly. We will pay attention to the latter.
If you have a WordPress site, it is likely that your website is responsive. This means that content will scale up or down depending on the screen size it is being viewed on. All the websites we make at SignalBoost are fully responsive so if you bought one through us pay close attention to the following details.
Match Your Size
When loading images on a website, the larger the image size, the longer it is going to take for the site to load. For this, it is important to always keep your images at the lowest size possible, which is typically the largest size at which your image will be displayed.
Match Your Aspect Ratio
Do not use a portrait image for a landscape section and vice versa. The result will be the wrong area of your photo being displayed.
Always check your responsivity
Finally, the last part of this section serves to advise you to never forget to check your responsivity across multiple browsers and devices. An easy way to do this is through http://app.xrespond.com/ where you can simply input the site where your image is displayed and the website gives you a variety of resolutions to choose from.
Compression
A good website has fast loading images, and beautiful ones too. It is easy to over-compress your images, which then might end up showing up visual artifacts. However, avoiding this nowadays is easy. If you already use image compression software in your workflow, you may keep using that software. Otherwise, there are two main solutions to this problem.
WordPress Plugins
SG Optimizer
SG Optimizer is a plug-in that comes pre-installed with all SiteGround-hosted WordPress sites. There are two functions which help you with image optimization. To access them, click on the SG Optimizer plugin, and go to the “Image Optimization” tab.
- If you want images to be automatically compressed upon upload, turn New Images Optimization “on”
- If you wish to compress all existing images on your website, click ‘Start Optimization’ under Existing Images Optimization
Smush
If your WordPress did not come preinstalled with SG Optimizer, you may use a plugin that’s specific for this image compression functionality, Smush.
Online Compression: TinyJPG/TinyPNG
The websites https://tinyjpg.com and https://tinypng.com have a permanent spot on my bookmarks bar. These two websites can be used to compress up to 80% of your images without visual tearing or resizing.
Alternate Text
Alt. text is (self-explainably) text which appears instead of an image on a webpage if it fails to load on a user’s screen. This text is particularly important nowadays, as it allows us to give browsers and site-crawlers more information about our page (and the image). It helps in describing an image to the sight-impaired, and also has the powerful capability of enhancing your website’s searchability.
To add Alternate Text to an image, first go to your Media Library, and click on the image you want to modify.
There, you will find the ‘Alternative Text’ field.
We must use this field wisely. It must be good for our SEO, but it should also be written with the sight-impaired in mind. We are aiming for both descriptive, and SEO-boosting.
In this case, a poor example of an Alt. Text would be:
Client Results Web Development Increase Engagement Now
An okay example would be:
Web Development Results for Client
And an excellent one would be:
Web Development Results for Client RCK viewed on Laptop, Tablet, Mobile
Then simply save your changes and that image will always be associated with that Alt. Text.
Editing Images
There are four things the WordPress image editor lets you do to an image. In order to access the edit page, click ‘Edit Image’ below your image on ‘Attatchment Details’.
The one you’ll probably be most frequently be using is the scaling. This allows you to resize the image. It is typically favorable when uploading a logo that ends up being too big. Using it will also help with images that are bigger than the max size they show up in.
Then you have image cropping, rotating, and flipping. When cropping, set the crop area and then click the crop button again.
Cropping
Rotating
Flipping
If by this point you are overwhelmed with the amount of thing one needs to keep in mind, don’t worry! It is a lot. But thankfully you can refer back to this page whenever we want to. We are sure to update this guide as often as there’s updates to WordPress. Thanks for reading and consider subscribing by simply messaging “Subscribe me” on our live chat.
Leave A Comment