Sunday, January 23rd, 2022

How to Avoid 5 Common Image Optimization Mistakes on WordPress

Creating a WordPress website is not just about written content. This also includes images, which can be moved around. 60% or more of the site’s bandwidth. You might think that adding images to your site is as easy as selecting and uploading them – but it’s a bit more complicated. Here, we explain image optimization, why it’s so important and how to overcome the most common mistakes people make.

“Image optimization” is the practice of compressing images to reduce website page load times and the burden on network resources including data usage in the case of mobile. Done right, image optimization also helps increase your site’s search engine optimization (SEO) ranking, as search engines factor in page load times when ranking websites.

Conversely, not optimizing images can produce a harmful ripple effect: a website’s load times slow down dramatically, causing online search engines to “punish” it by slashing their search results further down. Those who still find the website may be disappointed by its sluggish loading times and early log off (goodbye, potential customers).

Clearly, image optimization is a must! Let’s look at some of the most common illustrated boo-boos and how to fix them.

using the wrong image format

Each image on your website, including photographs, logotypes and infographics, is a type of image. As for website load times, it is important to know which format to use when saving these different images to your WordPress media library.

Most images fall into one of two categories – raster or vector files. raster files (jpeg, png, gif, tiff, raw, psd) are pixelated; That is, they are made up of thousands of tiny, colored dots. You must be careful when resizing them, as they are size dependent. There is only one small size limit at which they will have good resolution. Go too far from this range and they become blurry.

vector files (PDF, EPS, SVG, AI) are composed of flat lines and colors, and are size-independent; They can be as big or small as you wish without losing resolution.

When working with raster images:

  • For professional photos or art works that you need the best possible resolution on, for example if they are for a large size print out, save as bickering.
  • TIFFs chew up a lot of bandwidth, so save other photographs or art works as jpeg, for optimum resolution at smaller file sizes.
  • For most other raster images, even more compact png will suffice. You can use it for most stock images, illustrations, and other graphics.
  • then they’re animations on the go, with loops, or gifs – Like what people post on Twitter. GIFs need to remain as GIFS to keep working.
  • Raw Images (literally “raw” images uploaded from a digital device) must be saved as PNG or JPEG before uploading to the website.
  • psd Photoshop has a format to switch to when you have existing JPEG site images that you want to edit. After editing, convert them back to JPEG.

All raster files must also be saved as one of two color models: CMYK or RGB. to select CMYK if the images are for physical print, and RGB If only they would be seen onscreen.

Image optimization when working with vector images:

Vector images are usually things like logos, icons, typesetting, and digital illustrations. Adobe Illustrator is commonly used to create, design and edit vectors. You may need to save the images as PDF Printers often request PDFs when you send them to the printer – or when you need to load large, readable documents on your website, such as “how-to” guides or product brochures with lots of pages. When you view single images that are PDF, convert them to PNG with a free online converter.

About the same time you’ll save as eps is to send the vector logo to someone via email; You will not use it for your site images. not likely to work with you svg Or NS files but convert to PNG when you can.

uploading large image files

Many people happily select their images and upload them to WordPress, assuming they are in size Look Their size on the website page will be Huh. The file size of the image may be too large; Download any stock image to your desktop, then right-click “view actual size” and you’ll see what we mean…

Optimize when uploading images to your site

In general, it’s a good idea to manually compress images before uploading them to your website. There are many free file compression platforms for JPEG, PNG, and other file types. Visit our sister blog for more tips on compressing images.

As a further protection, integrate one of the WordPress image optimization plugins on your website – check out our five best ones here. These plugins can compress images when you upload them to your site, or compress images already in your WordPress media library.

not caching images

“Caching” occurs when an Internet browser “stores” copies of images in a temporary storage location, or cache, so that they can be accessed more quickly by the browser in the future. Think about visiting a website for the first time: Your browser needs to process a lot of file information before the website can be fully displayed.

It only wants to perform that task once, so it automatically stores most of the site’s content in a temporary cache, so that the next time you visit the site—provided it’s not months and months—the browser only needs to Have to pull images and other content from cache, for quick and easy load. Browsers cache files until their time to live (TTL) expires.

Integrate a WordPress caching plugin to make sure your website images can be easily cached for visitors to your website – here are Elementor’s top five picks.

not using lazy loading

“Eager loading” is when a website’s page content loads all at once when it is opened. This slows down overall site performance and load speed, especially when the page contains a lot of images – and especially on mobile. In contrast, lazy loading loads only the page content that the website visitor can see on the screen immediately. The rest of the (still hidden) content is loaded in his spare time or when the visitor scrolls through it. Loading iteratively in this way makes for a smoother load process.

To optimize lazy loading for your WordPress website, we suggest integrating the a3 lazy load plugin. Then you can choose the setting for image lazy loadhandjob video lazy load, and for other page content. It is intuitive and easy to use and also loads webpages containing hundreds of images fast.

BTW, our popular FooGallery plugin uses lazy loading by default, which makes it ideal for photographers.

Not using a Content Delivery Network (CDN)

Use a Content Delivery Network

Ever heard of “latency”? This is the frustrating pause between your request to load a web page and the moment it loads. Remember, the Internet is not airborne; It is moved around the world via underwater and underground cables; So, if you are in London and visit an image-heavy website that is hosted locally in Auckland, New Zealand, it will take time for that website to reach you! Unless, of course, multiple copies of that website’s images are already cached in network servers around the world, one of which you will have. That’s what content delivery networks do. They are an invisible network behind most of the web.

In most cases, you will need to subscribe to a separate CDN service from your website hosting service. Here are 7 recommended CDN services from WPbeginner.

We’ve covered the big picture on image optimization here – but if you have any other tips for image optimization on WordPress, please leave them here and we’ll add them to it! Thanks for reading online and for continued success.

Source link