Register

How to you guys Optimize your Image posts?

Basic discussions about SEO
Posts: 29
Joined: Thu Mar 15, 2018 4:28 am

How to you guys Optimize your Image posts?

Postby bsystems » Tue May 15, 2018 7:19 am

How to you guys Optimize your Image posts?

Posts: 163
Joined: Mon Mar 27, 2017 4:16 am

Re: How to you guys Optimize your Image posts?

Postby sinelogixtech » Tue May 15, 2018 10:19 am

Start with high-quality images
Use the right file type: JPEG or PNG
Resize images to optimize page speed and appearance

Posts: 49
Joined: Wed Sep 28, 2016 11:09 am
Location: Dubai

Re: How to you guys Optimize your Image posts?

Postby johnwiliam5946 » Tue May 15, 2018 10:56 am

When optimizing images for the web, your goal is to reduce the file size as much as possible, without sacrificing too much in terms of image quality.

Posts: 227
Joined: Tue Nov 08, 2016 5:12 am

Re: How to you guys Optimize your Image posts?

Postby Davidwatson » Wed May 16, 2018 6:33 am

Start with high-quality images
Use the right file type: JPEG or PNG
Resize images to optimize page speed and appearance


Newspaper Ad Agency in Delhi

Posts: 94
Joined: Thu Sep 08, 2016 10:25 am
Location: Derby

Re: How to you guys Optimize your Image posts?

Postby Mangat Singh Dhiman » Wed May 16, 2018 7:48 am

Tips for image optimization are:

Always use Alt tag with images. The alt tag is most probably the most important image optimization factor. The text in the alt tag is displayed in place of the image if the image can not be shown or take time to load.

Image size is also very crucial factor for optimization of image. Because images can make your page heavy.

Add link to images and remember to use a title tag whenever linking your images.

User avatar
Posts: 105
Joined: Fri Mar 03, 2017 11:30 am
Location: SG

Re: How to you guys Optimize your Image posts?

Postby daica85 » Thu May 17, 2018 3:15 pm

I usually optimize all images for the article before uploading to server. I'm using this site to optimize images: compressor.io

Hope this helps!
Godaddy Renewal Coupon 27% Off for Domain & Hosting Latest for 2018
Godaddy Coupon Only for $1/mo Hosting + 99 Cents .COM Domain

User avatar
Posts: 699
Joined: Mon Jan 18, 2016 5:57 pm
Location: Forum

Re: How to you guys Optimize your Image posts?

Postby RH-Calvin » Mon May 28, 2018 1:22 pm

Share images in various social profiles and use alt text in your images to help optimize them better in search engines. Use proper optimization techniques will help to rank your images higher in search engines.
Cheapest VPS | $1 VPS Hosting
Cheap Dedicated Servers | Free Setup and IPMI | Unmetered Bandwidth

Posts: 50
Joined: Mon Jun 11, 2018 7:10 am

Re: How to you guys Optimize your Image posts?

Postby Simi123 » Mon Jun 11, 2018 7:37 am

The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimizations. One of the most popular tools ways is to simply compress them before uploading to WordPress. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.

The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.

Choose the Right File Format
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:

PNG – produces higher quality images, but also has a larger file size. It only uses lossless compression.
JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG (or JPG) for images with lots of color and PNG for simple images.

Compression Quality vs Size
Here is an example of what can happen you compress an image too much. The first is using a very low compression rate, which results in the highest quality (but larger file size). The second is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.
As you can see the first image above is 590 KB. That is pretty large for one photo! It is generally best if you can keep a webpage’s total weight under 1 or 2 MB in size. 590 KB would be a fourth of that already. The second image obviously looks horrible, but then it is only 68 KB. What you want to do is find a happy medium between your compression rate (quality) and the file size.

So we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo with low compression. Typically simpler images like PNGs should be under 100 KB or less for best performance.

Lossy vs Lossless Optimization

It is also important to understand that there are two types of compression you can use, lossy and lossless.

Lossy – this is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo, or other image editors to adjust the quality settings of an image. The example we used above is using lossy compression.

Lossless – this is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim.

It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.
Image Optimization Tools and Programs
There are a lot of tools and programs out there, both premium and free, that you can use to optimize your images. Some give you the tools to perform your own optimizations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.

Resizing Images to Scale

In the past it was very important that you upload images to scale and not let CSS resize them. However, this is no longer as important since WordPress 4.4 now supports responsive images (not scaled down by CSS). Basically, WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See an example of what your code actually looks like below.
So with more and more HiDPI displays nowadays, it can be good to find a happy medium. Say 2x or 3x your website’s column or div size, but still less than the original size. The browser will show the correct one based on the resolution of the device.

The WordPress media library creates thumbnails based on your settings. However, the original is still retained and untouched. If you want to resize your images and save disk space by not saving the original, you can use a free plugin like Imsanity.

Return to SEO General

Who is online

Users browsing this forum: No registered users and 1 guest