Images are an important part of every professionally designed blog. They make blog posts more appealing, they can smoothly break long blocks of text, refresh tired brains after reading, and add additional meaning to the content – you probably know the saying that a picture says more than a thousand words.
Adding images to your blog posts can also help with search engine ranking. That’s why it makes sense to use at least one image per blog post if not even more, especially for longer blog posts.
Nevertheless, adding images to a blog is not as simple as it might sound; especially if you want to do everything right – from choosing the right format to optimizing image size and adding data for search engines.
There are many small important details about optimizing images every blogger should know. Especially if you are a beginner, many things can be confusing (for example the difference between title tag and WordPress Image Title).
In this blog post, you will learn every important detail you need to know about adding images to your blog post. We have a lot of things to cover, so let’s get started.
Two broad image types – vector and raster graphics
In general, images and photos are divided in two broad categories – vector and raster graphics. Vector images are generated mathematically from basic geometric shapes – points, lines, polygons and curves.
Their big advantage is that they can be scaled up or down and don’t lose any quality at all, they’re easy to edit, and come in small file sizes. Vector graphics are created in vector drawing programs like Adobe Illustrator, Corel Draw, Inkscape, DrawPlus, Xara Xtreme, Gravit.
The disadvantage of vector images is the absence of full cross-browser support and they are best for images that are made of more simple geometric shapes. A vector image contains less per-pixel details. That means they aren’t ideal for artwork and high-detail images like photographs.
- Technical drawings
- Physical products
The most popular vector graphics file format for web is .svg (other formats can be .ai, .esp, .pdf). SVGs use XML to define the basic properties of the image.
The problem with vector graphics is that you can't add .svg files in your WordPress' Media Library by default. Since .svg files are text based as mentioned, they present a big security risk. You will have to install a plugin or do changes to functions.php for adding .svg images in WordPress. I suggest you do a research on your own how big the security risk really is..
Where possible, you should always prefer vector formats over raster graphics. That might be a problem in WordPress.
Different raster file formats and which one to use for different types of images
The second big category is raster graphics. Raster graphics are composed of a rectangular grid of pixels. Pixel is the smallest unit of a picture, a single square if you enlarge an image enough.
That also means the quality gets lost to a certain extent if you enlarge the image. That means you need an image large enough to be rendered sharp. That’s also why you might often hear from designers that you should “make sure the logo is in vector format”.
The most popular raster graphics file formats are .jpg, .gif, .png. Raster images have universal browser support, they are good for pictures with many details and that’s why they are widely used.
Their downside is that they need to be properly optimized. First you need to choose the right file format, and then optimize it for the smallest possible size (to ensure proper page speed) while keeping the desired quality (for the image not to appear as a blur).
You will be dealing with all three different raster formats, so we have to say a word or two about each of them.
As an interesting fact, a raster image of 100x100px has 10,000 pixels. Each pixel stores RGB-A values (8 bits per value / 4 x 8 = 32-bit color) and takes 4 bytes of space. 10,000 pixels take 40,000 bytes or 39 KB. That stands for an unoptimized image.
|SVGs||Scalable, everything besides photo/artwork||By default||Minifying|
|GIFs||Animations, symbols, icons, little graphics||Binary||Lossless|
|PNGs||A compromise between GIFs and JPEGs
|JPEGs||Photo images with many colors, artwork
Below are all the factors that should influence your decision on which format to go for:
- Purpose of the image (background, in a post, CTA button etc.)
- Image compression possibilities without big quality loss (file size)
- The number of colors needed
- Transparency – yes or no
- Animation – yes or no
Now let’s explain the table above and say a word or two about each of the raster formats.
GIF stands for Graphic Interchange Format and was invented in 1987. They are bitmaps with a limited color pallet of 256 colors (an image can have even fewer colors; and fewer colors mean smaller size).
They support binary transparency and animation. Animated GIFs have more than one frame. GIFs also support interlacing which means that an image preloads as a blurry one and becomes focused when the image finishes downloading.
If you are wondering when to choose the GIF format, here’s the simple answer: Choose GIFs when you need animation that can’t be created with CSS or when the file size of the same image is smaller than if saved as PNG-8.
You can then further optimize a GIF’s file size by choosing fewer colors and lowering dither (dither creates a smoother transition between colors). To achieve the latter, you need proper photo manipulation software like Photoshop (more about that later).
PNGs were created because GIFs were patented and there could have been potential licensing problems. PNGs stand for Portable Network Graphics and they provide high image quality, support for transparency and lossless compression. We know two types of PNGs: PNG-8 and PNG-24.
PNG-8 supports only binary transparency (the pixel is either 100 % transparent or opaque) and not partial transparency like PNG-24 does (so called full alfa transparency).
PNGs are lossless and don’t lose quality during editing. That makes files a bit larger, but oftentimes still smaller than GIFs. They don’t support animation.
- PNG-8 (8 bits per pixel): Up to 256 colors, a good GIF substitute if the file is smaller, binary transparency. 8-bit images can use 256 possible colors and 24-bit images up to 16.7 million (also called image depth, which can be 1 bit, 8 bits, 16 bit, 24 bit and 32 bit).
- PNG-24 (24 bits per pixel or, to be more exact, 32 with transparency): No color restriction – they can have up to 16 million colors, possible partial transparency (greater and cleaner), can be used instead of JPEG if lossless format is needed (but the file size can be almost double).
JPEGs & JPGs
JPEGs are the perfect choice for images with a large range of colors, since they support 16.7 million of them. That makes them perfect for saving photos. They have an excellent compression algorithm that preserves gradients and a dynamic color range.
If an image is too compressed, it becomes blurry, fuzzy, pixelated or grainy. But you can choose how much you will compress the image (from 0 % to 100%). Their big downside is that they don’t support transparency.
Here is a simple overview of which image format to choose:
- If you need an animated image, choose GIF
- If you have a photo that doesn’t need transparency go for JPEG and optimize size/quality ratio
- If you have a photo that needs quality transparency or big detailed graphics go for PNG24
- For symbols, icons and simple graphics, compare PNG8 and GIF file sizes and choose the smaller one
It’s also worth it to mention the WebP format that was developed by Google with the goal of ensuring superior compression of photos. WebP images are supposed to be around 25 % smaller than PNGs and JPEGs with the same quality. The format also supports transparency and animation.
The disadvantages are poor browser support and a little bit plastic look of images at higher compression.
It’s easy to create WebP images, but for serving them, you might need a WordPress plugin or do some technical updates on your site (rewriting .htaaccess). It’s still a very emerging format, use it only if you know what you are doing, but definitely keep an eye on it.
Raster image optimization process
Now that you know which format to choose, optimization comes into play. Since you will more and less be dealing with the raster graphic (GIFs, JPEGs, PNGs) when it comes to image optimization, you will have to make the effort to optimize images as much as possible (there are many variables in your control).
The main reason for image optimization is to provide fast page speed and consequently quality user experience. Big images take a lot of space and that slows down the page load time. Nobody likes to wait for an image to load. With mobile browsing on the rise, optimizing images is even more important.
When it comes to images, the page load time gets hindered in two ways:
- Broadcasting large files – the bigger the file, the longer it takes to load
- Scaling – it takes processing power to show images in the right dimension
Defining image dimensions in the HTML code gives the browser a head start on displaying the image correctly. If the image resolution is the same size as dimensions in the HTML code, the browser doesn’t lose time with rescaling the image.
Unoptimized images hurt the page load time, user experience, search engine rankings and consequently bottom line goals (micro- and macro-conversions) of your website.
That means there are several things you can do to optimize the images for your blog:
- Saving an image in the resolution that perfectly fits your blog layout
- Optimizing image quality
- Saving an image in the right file format
- Reducing the whitespace around the image and cropping the image properly
- Further optimizing image file size with compression plugins for WordPress
- Last but not least, some simple graphics can be replaced by CSS (gradients, shadows etc.)
Resizing the image – image resolution
Let’s start with image resolution, since it usually influences image file size the most. The two terms you have to know are file dimension (or resolution) and file size. Together they are called the physical size of an image.
- File dimension (resolution) is information that tells how much space an image takes. Images have dimensions expressed in width and height (in pixels). A 700×400 image takes 700 pixels in width and 400 pixels in height.
- File size is expressed in kilobytes (KB) or megabytes (MB), where 1 MB = 1024 KB, and it represents the size of disk space a file takes on a computer or a server.
Let’s do some simple math. A 32-bit photo takes 4 bytes per pixel. A 700×400 image has 28,000 pixels. That’s 112,000 bytes or 109 kB for an unoptimized image.
Even if you take an image with a modern phone, the image size is much higher than what you need for the blog posts. If I take a photo with my iPhone 6s, the image dimensions are 3024×4032 pixels and the file size gets up to 1.5MB.
If you put several images like that in your blog post, the size of the page can easily exceed 5MB. Ideally you want to keep you page size under 3MB (and under 1MB is the real ideal).
Remember that WordPress optimizes only image size (it properly scales the image, if the size is different than required), but not file size.
So the most important tip for image optimization is to size the images exactly as large as your blog content width is. For most blog layouts, you need images somewhere around 680 – 700 pixels in width.
Larger images are automatically shrunk by the browser. While you are in the process of resizing an image, don’t forget to also remove any whitespace around the image and crop it properly. You can do resizing and cropping with various image manipulation software (more about that soon).
On the opposite side, don’t scale your images too small, because the browser will automatically enlarge them, which will result in blurriness and pixilation. Your target should be to keep the size of each image under 100kB, while the image is still of decent quality.
If you are wondering at this point how to check the perfect image resolution for your blog posts, it’s quite simple:
- If you want to know the optimal size of images for your blog, it’s best to do it with web developer tools. Don’t be scared, because it’s super easy. Open Web developer tools (right click on an image in the browser – inspect element) to see to see the size to which the images are rendered. As we said, the physical size of the image should be the same as the rendered one.
- To see an image size, you should open image properties on your computer (right click on an image, properties) or check it in the WordPress media center.
- You need a proper image manipulation software to resize images.
You can easily do that with free software like Paint for Windows or Preview for Mac, or even more free powerful software like GIMP (free Photoshop alternative) or online solutions like Pixlr, PicMonkey and Fotoflexer. Paid options are software solutions like Photoshop, IrfanView or Pixelmator. I personally use Photoshop since it’s an absolute winner in terms of capacity and functionalities.
Don’t worry about PPIs and DPIs unless you plan to print images
If things already sound a little bit confusing, here’s some good news. You don’t have to mind the PPIs (pixels per inch) and DPIs (dots per inch) when it comes to web graphics, because they are important only for print. On the web, pixels are the ones that matter. But it’s good to know a few basic terms.
- DPI is an old printing term that measures how many droplets of ink a printer is laying on the paper per one physical inch. The more dots per inch, the sharper the image. For example, if you choose to print a photo in “Photo / High Quality” mode, printer will print it with around 1440 DPI. As you can see, DPIs are a technical term for printer capabilities. A 1440 DPI printer will print 1440 dots in one linear inch.
- PPI for monitors tells how sharp an image will be (that’s why it’s also called pixel density), if you use the recommended resolution. In the old days (mid 1980s), monitors were produced with 72/96 PPI, but today there are many different screen sizes and types with different PPIs. People often confuse DPI with PPI and vice versa.
- PPI for screens tells how many pixels a monitor shows per inch, but the size of a single pixel is purely a mathematical thing. You need to know the physical screen size (inches) and screen resolution (width x height in pixels). That’s how you can calculate PPI. But as we said, PPIs for web design don’t matter, resolution matters. Staying at 72 PPI for web design, which is the default value in many design programs, or in a range from 72 – 120 PPI works perfectly. The only reason to mind the PPI for web design is because it makes sense to use the same PPI settings in design software to avoid unnecessary scaling and resizing (fonts – in 72 PPI 14pt font is 14px and in 300 PPI 14pt font is 58px). Many image formats don’t even save PPI values (png, gif), they only care about pixel width and height.
- When you are printing, PPI tells the printer how many pixels to print per inch. The higher the PPI, the better the image quality a printer can print. 300 PPIs are necessary to print a high quality image. So when you are designing for print, make sure that you do use 300 PPI and the right document size.
- If you design for print at 72 PPI and then need 300 PPI, you would have to redesign from scratch, use resampling where designing software guesses what color pixels to insert (10-inch document width with 72 PPI has 720 pixels and 300 PPI has 3000 pixels, so there are new pixels to fill) or you have to resize the document (make it much smaller).
As trivia, you can see a few other differences in the table below when you are preparing images for print or web. Besides the DPI/PPI difference, they use different color modes and sometimes different file formats. And you do need a much bigger resolution for print than for web.
|Color mode||CMYK (cyan, magenta, yellow, black)||RBG (red, blue, green)|
|Pixel density||300 PPI, DPI printer capabilities||72 PPI (myth)|
|Resolution||Photo: 4×6 in = 1200x1800px
Letter: 8.5×11 in = 2550x3300px
|To add a photo, mind the content area width: 500 – 800px|
|File Formats||JPG, PNG, PDF, TIFF, EPS||JPG, PNG, GIF|
Big images on the web mean big problems. But print is a completely different story.
Image compression and compression plugins
Compression is the process of algorithmically removing image information that the human eye can’t perceive. Among the three different file types, JPEGs can be compressed the most.
There are usually two stages of image compression (where possible). First there is the lossy phase and then the lossless phase. Here is the difference between the phases:
- Lossy (eliminates some pixel data): Lossy compression algorithms modify the source stream of the photo in a way that information can’t be restored upon decompression. They focus on the details that the human eye can’t usually see, for example limiting the number of colors. But with lossy compression, you lose some quality of the image. Examples of lossy methods of image compression include reducing the color space, Chroma subsampling, DCT transform coding and fractal compression.
- Lossless (compresses the pixel data): Lossless compression tries to squeeze a few kilobytes out of your image based on information compression theories – by identifying and eliminating statistical redundancy. Image can be restored to the same state after decompression. Examples of lossless methods of image compression are run-length encoding, area image compression, DPCM, entropy encoding, LZW adaptive dictionary algorithms, deflation, and chain codes.
PNGs and GIFs are only lossless compressed and JPEGs can be lossy and lossless compressed. There are two options for compressing images – software and WordPress plugins.
The downside that lossy compression brings is lower quality of an image. That means you have to find the optimal spot between file size and image quality.
Save images in lower quality
Every better image manipulation or design software solution enables image optimization and allows you to save images in lower quality (JPEGs) or with fewer colors.
If you are compressing a JPG image in software, go for around 50 % – 70 % of the image quality (that’s 30 % – 50 % compression). Here is the scale for compressing JPEGs:
- Low quality – 10 %
- Medium quality – 30 %
- High quality – 60 %
- Very High quality – 80 %
- Maximum quality – 100 %
The other option that you have as a blogger, if you are using WordPress, is to install one of the many plugins.
Image compression services and plugins
There are many plugins available that optimize your images. You can use their online service to upload the images and download the optimized ones or, even better, the images get optimized when you upload them in your media center. The latter option can save you a lot of time.
Nevertheless, it’s better that you optimize images on your own with appropriate design software, because you have greater control. You can even use both, since many plugins use their own algorithms to further optimize images.
Besides that, they usually strip images of metadata (Exif data – date, time, camera etc.) to save a little bit more of additional space. Most plugins enable you to choose between lossless and lossy compression.
The most popular WordPress plugins for image compression are:
- Krakren.io – The one that I use
- Compress JPEG & PNG Images (Tiny PNG) – Also a very popular one
- WP Smush
- CW Image Optimizer
- EWWW Image Optimizer – It runs locally, so you need execution rights on your server
I use Photoshop to properly size the images (the right resolution for my blog layout) and additionally compress JPEGs at around 60 % quality.
On top of that, I use Kraken.io image compression plugin (costs me around $5 per month), that compresses images additionally from 10 % – 20 %. It’s not a huge saving, but when you use many photos there is a difference.
Images for Retina devices
Retina display was invented by Apple and released with the iPhone 4. It’s called Retina, because the PPI is so high that the human eye (eye’s retina) is supposedly not able to distinguish between pixels on the screen.
It quaduples the pixels per area – where a normal display has one pixel, retina display has four. That leads to images looking sharper and crisper (twice as sharp), but you need to upload images that are at least double the size. Other companies use terms like HiDPI, since Retina is Apple’s invention.
You don’t need higher PPI (pixels per inch) images, because the PPI for monitors is fixed as we’ve discussed, but bigger image sizes (bigger resolution), of which Retina displays make virtual pixels.
That’s why you need to deliver images that are 2x or 3x the normal size for Retina displays (if your image is 600×600 you need 1200×1200 for Retina display). Luckily, these images can be very aggressively compressed, so they don’t become too huge in size.
When it comes to serving Retina images there are two important steps:
- Creating 2x images
- Detecting a Retina display on a user agent.
You can achieve that in two ways. The first is with HTML/CSS code and saving two images with different resolutions (email@example.com is usually the name of the double sized image – you add @2x to the name) and the second one is with the Retina WordPress plugin.
The downside of Retina images is, of course, creating higher resolution images (not to mention you have to add larger images for all posts you already published that have too small resolution), larger image file size that needs more space and bandwidth, not to mention that high resolution images can be easily stolen if you own the copyright.
It’s not mandatory to provide Retina images, but that is absolutely where the future is headed; and you want to be one step ahead of others. The plugin works really well and if you don’t master HTML/CSS enough or want to save time, it’s definitely a smooth solution.
Where to get images for your blog and minding the license
Now you know enough theory about images. It’s time to answer the question of where to get images for your blog.
The first thing you have to do as a blogger is to put in the effort to make sure that images are congruent with blog post content. Images need to be relevant, not just random.
Once people start blogging, they realize how much time it takes to find proper images and optimize them. In most cases, the more effort you invest, the more effect the images have.
Hand-drawn images and animations attract the most attention, but they can get quite big in size and take lots of time to make. Graphs, infographics, visual quotes and stock photos are also good options.
Just make sure your images are relevant and that they don’t look cheap, which can especially happen with free photos. You might be losing readers because of the cheap images that are unrelated to content.
Types of images you can add to your blog
Here are all the different options you can choose from when it comes to adding images to blog posts:
- Photographs – taken by you or the people you know
- Stock photos – professional photos taken by others
- Free photos – they look like cheap versions of stock photos
- Art images
- Custom graphics
- Animated GIFs
- Visual quotes
- Data charts, graphs and diagrams
Let’s also not forget about:
- Advertising banners
- Branding images (logos)
- Product images (books, merchandise, products etc.)
- Awards, prizes, clients, sponsors
- Community badges
- Social media profiles
- Blog author photos
- Buttons and call-to-actions
- Also don’t forget to embed presentations or videos where appropriate
There are many options. Use several of them in every blog post to make the content as appealing as possible. Since the brain loves images more than text, it also helps readers more easily grasp the main ideas from your content.
Minding the image license
The next important thing is licensing. This is not legal advice, since I am not a lawyer, but a very general overview of image licensing. When a photo is taken, it’s copyrighted by the person who took it or the company that employs them (in case of media journalists, for example).
License is a mechanism that grants other people to use intellectual work. So a photographer can give license to other people to use the image, but under certain circumstances and certain conditions. License is the legal term that defines these terms and conditions.
In general, we know three big types of terms and conditions:
- Creative commons (CC): It’s a type of licensing (kind of open-source for artwork) where authors enable other people to use their work for free under certain conditions (attribution, non-commercial use, no derivatives, share alike). There are six different CC types of licensing and most of them require attribution, meaning giving credit to the author. Most images you don’t have to pay for are copyrighted by CC (if not in public domain).
- Royalty free (RF): Royalty free images are not free images, but images on stock photo websites where you pay one time for the image use. “Royalty free” stands for selling a photo on a flat rate for various different purposes. Once you secure an image, you can make additional uses of it without additional payment. The opposite, non-royalty free licensing, is called rights-managed licensing and is priced depending on how an image will be used, the amount sold, region, size etc.
- Public domain: The public domain includes all the artwork whose licensing rights expire, that authors intentionally released into the public domain, where the author failed to follow certain required formalities, or the works that are not eligible for copyright protection. The public owns these works, not individuals. Creative commons also has a public domain declaration. You can use these works freely, but attribution is appreciated. Sometimes collections of public domain works can be copyrighted, so you have to be careful about that.
Besides the mentioned three categories, there are many different licenses in existence and your job is to figure out under which license an image is and what you can do with it.
The six Creative Commons licenses
Creative commons (CC) is one of the most popular licenses you will encounter when searching for free images on different sites dedicated to that (more about that later). As mentioned, there are six different types of licenses (plus domain declaration). It’s quite easy to understand them so I added short descriptions below:
- CC BY (Attribution) – you can use, share and modify as long as you give credit to the author.
- CC BY-SA (Attribution + Sharealike) – you can use, share and modify, as long as you share your modification using the same BY-SA license. Attribution means that you leave any copyright notices intact, cite the author name, screen name, user identification, work’s title and if it’s a derivative, you have to identify your work as a derivative.
- CC BY-ND (Attribution + NoDerivatives) – you can use and share work, but you are not allowed to do modifications, and of course you have to credit the author. No derivatives means using the work exactly as it is.
- CC BY-NC (Attribution + NonCommercial) – you can use, share or modify work as long as you give credit to the original author and you don’t sell the work or your modifications. This is quite a problematic license for bloggers, assuming you want to make money with blogging. Even if you don’t make money directly from your blog post, it’s quite a gray area whether you can use BY-NC images or not. Use them only if you aren’t making money with your blog in any way.
- CC BY-NC-SA (Attribution + NonCommercial + Sharealike)– you can use, share or modify original artwork, but you must not use it for commercial purposes, you have to license any modifications under the same license and, of course, you have to credit the author.
- CC BY-NC-ND (Attribution + NonCommercial + NoDerivatives) – you can use and share work, as long as you give credit to the creator, you are not allowed to do any modifications to the copyrighted material and you agree to not sell that work.
- CC0 – public domain declaration
If you plan to make money with your blog, the first three options are the ones you should go for (as well as for the images in the public domain, of course).
Four ways to get images for your blog posts
Now that you know the most common licenses, let’s list all the options for getting images for your blog posts. Basically, you have only four options:
- Make them – the best option if you have talent and time
- Search for free photos – but mind the license restriction and have clear expectations that the quality of free images is usually lower. Nevertheless, sometimes you can find a real gem.
- Buy them – on dedicated photo market sites (royalty free or even rights-managed images)
- Find a photographer or designer to make them for you – usually quite expensive
The order in which options are listed is probably also the order you should follow when it comes to finding perfect images.
Make your own photos
If you have at least some creative talent, you can make your own photos. Mobile phones today have cameras capable enough so that you can take a photo everywhere you go and get inspired. And it’s always cool to have a new gadget, like a fancy camera.
You can read a few tutorials on how to make professional photos or enroll into the Digital Photography School that will help you brush up on your photographing skills and make your photo creation process more professional.
You can take a step further by learning any design software and making your own graphic designs (like Photoshop or GIMP).
If that’s too much effort, there are luckily many solutions that can help you easily make your own photos without mastering any complicated software – from infographics and presentations to quote images. Examples of such solutions are:
- Canva – a solution to create all kinds of cool images
- PicMonkey – very powerful photo editor
- Aviary – popular photo editor for mobile phones
- Evernote Skitch – to easily add arrows and text captions to photos
- Cheezburger – to create memes
- Visual,y, Easely, Infogram, Visme and Piktochart – to create infographics
- Google Slides – to create presentations
By putting in the effort to make your own photos, you avoid any licensing issues, you can really make images exactly as you want and at some point, you might even sell them on stock sites. So whenever possible, create your own images and express your artistic talent.
Search for free images
There are thousands upon thousands of free images and photos. But there are two issues with free. It’s quite hard to find a high quality photo that fits your content. Stock photos usually come in much higher quality. The second issue is that you have to mind the licensing terms and conditions.
Both issues usually lead to lots of time needed to find the right image. Nevertheless, when you find one, it’s free (if we forget about the time you spent). There are more than 50 sites and search engines for free images. Here are the most popular ones:
- Death to Stock Photos
- New Old Stock
- Public Domain Pictures
- Public Domain Archive
- Good Free Photos
- Pickup Image
- Flicker (sorted by license)
- Focus Fitness – Free fitness images
- Google Images – Advanced tools (labeled for reuse)
Buy photos on stock sites
If you don’t make your own image or find a free one, you can buy one. The royalty-free versions are the ones to go to and you can find many sites that offer thousands of paid photos. Stock sites usually offer two models of payment:
- You pay for each photo you download. You buy photos with credits. The more credits you buy, the bigger discount you get. The final price you pay also depends on the image size. The bigger the image, the higher the price (considering all the variables, the prices are between $4 – $30 per image).
- The second model is the subscription model. You pay a monthly subscription fee and that gets you a fixed amount of credits every month (around $60 – $150 per month for 50 – 350 images).
There are many stock photo sites, and the most popular ones are:
- Fotolia – probably the best price/performance
How to optimize image loading to speed up your page
Now you know all the important basics of finding and optimizing images for your blog posts. Nevertheless, there are two more important topics to cover – how to optimize image loading and how to equip images for good search engine rankings.
There are four basic ways of optimizing image loading that can improve overall page load speed or user experience of your blog. The four ways are:
- Lazy image loading
- Linear or progressive image loading
- Responsive images
- Image sprites
Lazy image loading
If you have a longer blog post with several images, there are usually images placed both above the fold and below the fold. If you are wondering what that is, above the fold is the visible part of a blog post when the site is opened in the browser. Below the fold is everything that the user sees when they scroll down.
Images that are below the fold can be loaded later when the user scrolls down the page. It doesn’t make sense for the whole page to load with all the images before it’s shown to a user. That’s what lazy image loading enables. Pretty cool, right?
There are many plugins that can enable lazy loading functionality in WordPress blogs. One of them is the Lazy Load. Some themes also have an option that enables such functionality. If you want to speed up your blog, you definitely have to use lazy image loading.
Linear and progressive loading
The second thing you have the power to influence is how an image is loaded – there are three ways, actually. An image can be completely downloaded first and then displayed on the screen. That can take time and users might become impatient. It’s rarely the practice to load images this way in browsers.
The second option is that you show the visitor part of the image that has been downloaded so far. You can do that in two ways:
- Linear method (Baseline) – An image is revealed top-down over time. This is what most of the web uses today. The first information that the browser receives about an image is on the top left corner and then it continues horizontally across every row. An image is slowly revealed line by line (well, at least if your internet connection is slow).
- Progressive or interlaced method – In this case, the whole image is shown, but first very blurry and then getting sharper and sharper. It’s done by encoding a few extra smaller resolution image versions. To achieve that, you have to save a file with interlaced option (GIF, PNG) or progressive option (JPEG). Sometimes it makes a file smaller and sometimes it adds 10 % – 20 % to the file size. The progressive method is not supported by all browsers, and in that case the whole image needs to be downloaded first.
There is a huge debate over whether to use linear or progressive loading. But the fact is that the progressive method works best for JPGs and that’s where you should use them if it doesn’t add substantial weight to the file. You choose the way an image loads in a design software.
Responsive images – WordPress does it for you
Serving responsive images is a technique that allows to serve differently scaled images to different users based on the size of their display.
For smaller screens, smaller size images get loaded (similarly to Retina users who get served a photo in higher resolution). You specify the list of available sources and sizes in HTML, and then the browser chooses the most appropriate image size under your directions.
Luckily, responsive images became part of WordPress, so it doesn’t require any additional work from your side. WordPress automatically creates a few versions of an image and serves the most appropriate one.
Even if there is no additional work required for WordPress users, I just wanted to include this information here, because responsive images are an important part of today’s user experience.
CSS sprites are a way to reduce the number of requests images make by combining them into sprites – from one request for each image to one image request overall.
Image sprites are usually used for small repeated images. They get combined into one bigger file (which does take longer to load) and additional CSS code for background positioning.
Even if one image file is bigger, the page load time can be much faster due to a lower number of image requests. The downsides of sprites are that visitors have to download images they might not even need and that if you make a change on one image, the whole file needs to be cached again.
You also need enough design, HTML and CSS knowledge to make image sprites. There are also a few online sprite generators and plugins, but I don’t know how well they work. You will have to do research on your own.
Link to none
There is one more important tip regarding images that doesn’t have that much to do with optimization as it has to do with practicality and user experience. WordPress by default links an image to the source, so if you click on it, it opens a new tab with a full-sized image.
- Use custom URL if an image is a call-to-action
- Link to the media file if there is a need for a visitor to see the full image in a new window, like for infographics
- Link to the attachment page if you have a SEO optimized attachment page with relevant description of an image
- Otherwise link to none
You don’t want people to leave your site when they are reading your quality content. Thus link images to none, unless there is a need for the possibility to see a larger image, the image is a CTA or you want your image to link to another site. You can also install a plugin that does that automatically.
To sum things up regarding optimizing image loading:
- You should absolutely use lazy image loader.
- Use the progressive method only for JPEGs, especially for bigger images, but mind the file size (there are many different opinions on this one).
- Make sure your WordPress version is using responsive images. Always update your WordPress version, for security reasons as well.
- Use sprites only if you know what you are doing.
- Link images to none.
Optimizing images for social media and search engine ranking
The last thing we need to cover is how to optimize images for social media and search engine ranking. First of all, your page speed matters a lot when it comes to ranking.
By optimizing images (size, how they load) you already achieve a lot when it comes to ranking in search engines.
Nevertheless, there are a few more things you can do with images for search engine optimization purposes of your blog post. In general, it’s very important to add metadata about an image (additional information about the file), so the search engines know what they’re dealing with.
Use proper filenames
When you download images from stock sites or cameras, they have undescriptive names like stock_photo_23545454 or IMG_0345. That tells search engines nothing.
So name your image for the keyword you want to rank (optimizing-images.jpg instead of IMG_0345.jpg), but don’t stuff keywords. Use plain English when you are naming images, and use hyphens or underscores instead of spaces.
WordPress uses filename to create image permalinks.
Alt tag (alternative information) is the text that appears inside an image container if an image can’t be loaded for whatever reason.
It’s also the text that search engines use to get an idea of what the picture is all about. It’s part of the HTML code. As the definition goes, the text should describe what the image is all about.
It makes sense to use the targeted keyword in the alt tag, but it must absolutely be a non-spammy act, otherwise search engines might get mad at you (that’s never good, because you lose ranking).
Use three to five words for your alt tags. In WordPress you can add alt tags (alt text) using the media uploader. The alt tag is the most important attribute for search engine ranking, so always add it and use the keywords you want to rank in it.
Image title attribute
Image title is another attribute that you can add to images in the HTML code. The title tag text appears when a visitor hovers over a picture with their mouse.
Image titles are especially important for improving accessibility of a webpage for those who use screen reader devices. They should be written more as call-to-actions or content that the picture is associated with rather than descriptions of images.
You add the image title attribute in advanced options under image settings in WordPress. It’s not ideal to use the same title and alt attribute.
Here is how your HTML code of an image should look, but as mentioned you can achieve that simply with the WordPress media uploader (see the image below), and WordPress creates the code for you:
WordPress image title or attachment title
That’s the only information required by WordPress when you upload images. You mustn’t confuse the image title tag with the WordPress image title in the media uploader.
The WordPress image title is used for WordPress to handle your media files and to list/sort your media files in the media library.
Its purpose is to help admins and users find photos, nothing else. You must add it, but it won’t help you with ranking. But the most important thing: don’t confuse it with the image title tag. There are a few plugins that make the WordPress image title also the image title attribute, if that helps you in any way.
Image caption is the text that is traditionally displayed underneath an image. It’s something you want to emphasize in the text (and it has to be connected with the image), since many readers read the text below an image. How the text is displayed varies from theme to theme and CSS declarations.
WordPress captions are added using shortcodes. Image captions enhance scanning the text and understanding the structure. They are great to use beside headings, lists, formatted text and tables of contents to improve the user’s reading experience.
WordPress enables you to add image description to metadata. You can enter as much information about the image as you want, but it won’t help search engine rankings or improve accessibility.
Usually information like the story behind the photograph, where it was taken, how it was taken or detailed description of the photograph is added. You can also include links in the image description.
WordPress displays image description on the image attachment page (WordPress stores images in the same way as posts or pages, but that’s a matter for another blog post).
You have to unlink the image to the attachment page (link to: attachment page; as we discussed, link to none is the best option) if you want to keep the description to yourself. Description is mostly for your internal use and additional information you might remember later (where it was taken etc.).
Your images should always be placed near the relevant text. If possible, provide a good descriptive title and caption for the images you use in your blog posts. Don’t cram too many images together.
Publishing image sitemap
You can add image information to an existing sitemap, or you can create a separate sitemap to list images. I suggest you use a good SEO plugin like Yoast, which will take care of these things for you.
Structured data is HTML markup that helps search engines truly understand the content on your site. In some cases, it makes sense to add:
- Schema ImageObject structured data to the HTML code or
- EXIF data, like geotagging, to image information.
A few words about the second point. An image can have additional information embedded in itself. EXIF is auto-generated information (data, time, camera setting etc.) and IPTC, XMP are data that are user-generated. They can all coexist.
The problem is that additional data (EXIF, not Schema) will make your file size bigger. And there is a big question if they really help with ranking at all.
So it’s your call to strip images of structured data to make files smaller or leave them, hoping for better ranking (especially for local ranking). Well, the more compelling reason for adding metadata to photos you created is to track down the source of an image. But in the end, it’s your decision.
Social media structured data for images
As if adding images to your blog posts isn’t work enough, there is one more important aspect when it comes to images. Every social network has its own optimal image size, which can be quite a headache. An image that is very well presented in one social network gets a nasty cut in the other.
Social media structured data (meta tags in the HTML code) provides information to crawlers about how to show a post in the feed. That means you can specify different thumbnails for different social networks.
But that also means creating additional images with different resolutions and additional work. But if you rely heavily on social media traffic, it’s really important for your social media post to be optimized.
With plugins like Yoast (the one I use) or many other plugins that are dedicated exclusively to social media structured data and coexist well with SEO plugins, you can upload proper sizes for different social networks.
You can read more about social media meta tags for the main social networks below:
The summary – Here is how to make the images for your blog perfect
That was a lot of information to cover for a simple thing like properly adding images to your blog posts. I could have made this blog post much shorter, but I wanted to include all the different important information of why it makes sense to optimize images in a certain way.
It would have saved me tons of work if I had known all these rules and recommendations when I started blogging. I still have for hundreds of hours of things to fix, because in the beginning I just uploaded images, not minding the file resolution, size or adding metadata. Fixing things is a big headache.
I hope knowing all these things will save you a lot of time in the future and that you will achieve greater success with your blog because of a better user experience and search engine rankings.
For the end, here is the summary of the 10 most important things you simply have to do when it comes to adding images to your blog posts.
- Include at least one image in your blog post. For longer blog posts, use more images. There are many different types of images you can choose from.
- Find the right image – buy an image, find a free one (mind the license) or make it yourself.
- Make sure the image has the perfect size (resolution) for the layout of your blog and crop images if necessary (don’t leave any whitespace).
- Save the image in the most appropriate format (jpeg, png or gif).
- Use lossless and lossy compression where possible (save JPEGs in 50 % – 70 % quality).
- Do additional compression of images with dedicated WordPress plugins. An image should be under 100 kB.
- Equip the images with all the necessary data for search engine ranking purposes (use at least a proper file name and alt tag, besides the WordPress title which is mandatory).
- Use lazy image loader and link images to none (if there is no reason not to).
- Make sure too many images are not hindering your page load time.
- Enjoy the process, dealing with images is a great way to express your creative side.
All you need to achieve that is all the knowledge you just acquired, design software (Photoshop, or GIMP as a free alternative) and maybe a WordPress plugin for additional optimization. There are tons of options for where to get free or paid images for your blog post, and the best option is to make them on your own.
Have fun with images and make sure your blog posts really stand out, by having quality content and adding intriguing images.