How can I optimize images on my site?

[DanielKeith]

How can I optimize images on my site?

[Dani]

Use next-gen image formats. Photos should be JPEGs, animated images should be GIFs, icons and vectors that need to scale should be SVGs, and everything else shoudl be PNGs.

[nikitacod]

you can optimize image on website by the following ways-
Name your images descriptively and in plain language...
Optimize your alt attributes .....
Choose your image dimensions and product angles ....
Reduce the file size of your images.....
Choose the right file type....
Optimize your thumbnails.....
Use image sitemaps...

[Dani]

Oh, the latest version of Google Chrome also now supports <img loading="lazy"> to lazy load images without javascript.

[Mediamavericks]

Use Alt HTML Tag in your images for optimize for search engine.

[chiragm984]

Reduce the size of the images you have used into your website. You can use https://tinypng.com/ to compress your websie images.

[aarticod]

All you need to do is optimize your website images, improve your page load speed, and thus, providing a better overall user experience. If your page is loading fast on all devices, a user will spend more time there. It has been stated in many studies that users are more likely to leave those websites which are slow

[boxing]

apply these 6 points for optimizing your images

1. Start with good photos.
2. Showcase your products with multiple angles.
3. Use a white background for your products.
4. Save your images with the right dimensions.
5. Improve page load speeds by using the correct image format.
6. Experiment with quality settings.

[pritaeas]

Wondering why nobody has mentioned webp?

[Shailender_1]

Image Optimization on website is very Easy:

Use correct image dimensions
Use the Right Image Format
Compress your Image
Use progressive JPEG
Use Alt Tag and Title Tag

[Microsys]

Descriptive alternative text
Descriptive file names
Descriptive content around images
Correct image dimensions whenever possible
Compressed images (PNG og JPG)
Image sitemaps

[kavitabhaskar]

1) Name your images descriptively and in plain language.
2 ) Optimize your alt attributes carefully.
3) Choose your image dimensions and product angles wisely.
4) Reduce the file size of your images.
5) Choose the right file type.
6) Optimize your thumbnails.
7) Use image sitemaps.
8) Beware of decorative images.
9) Use caution when using content delivery networks (CDNs).
10)Test your images.
These are some important practices i follow for image optimization

[subhodip]

If you are using a WordPress website, then you can use plugins for optimizing your images. Otherwise, many online tools are available where you can compress your images without changing the quality. If you can, then it will be better to use custom images or GIFs.

[ianwallace79]

Google simply requires authentic information about the image you're posting. Simply rename the image to what it refers to. While uploading, input any alternative name in "alt text" section ad that's it. No need to fill it up with unnecessary descriptions etc. Yes, a compressed image with less size is considered as well optimized image too.

[Jack_62]

Thanks for the community answer. You can optimize your through the ALT tag otherwise use properties.

[jamesbrown93776]

Alt tag will helps to optimize images.

[rakeshkapoor992]

Name your images descriptively and in plain language.
Optimize your alt attributes carefully.
Choose your image dimensions and product angles wisely.
Reduce the file size of your images.
Google recommends using WEBP format images which are better in compression with same quality like jpeg , png etc

[kevinthomppsonn]

You can optimize images on your site by adding Alternate Text to your images. And when Google BOT crawls those images he'll read those text and will index it. So, this is how you optimize it.

[chrisjames]

Name your images descriptively and in plain language.
Optimize your alt attributes carefully.
Choose your image dimensions and product angles wisely.
Reduce the file size of your images.
Choose the right file type.
Optimize your thumbnails.
Use image sitemaps.

[seigell971]

Image optimization is very necessary to improve the loading time of your web page. Foolow the below tips to optimize your images

1. Compress the Image as much possible to redue its size. Use scalable image on your web page
2. Add alt text in every images to describe the images
3. Optimize image file name
4. Optimize image title
5. Add image caption
6. Use unique images
7. Add image structure data

[katebonner]

Icon optimization is a process of saving and delivering images to the smallest file size, without compromising the overall image quality.

Although the process may seem complicated, it is actually quite simple these days. You can use many image optimization plugins and tools to automatically compress images up to 80 optim without any significant loss in image quality.

Here is an example of optimized vs. unselected image.

Unselected images without improving WordPress

As you can see, when properly modified, the same image can be 75% smaller than the original without any damage.

How does image optimization work?

Simply put, image optimization is done using compression technologies such as "harmful" and "useless" that help reduce the overall file size without any significant loss of quality.

What does it mean to improve images?

If you've ever received a photo improvement recommendation through your WordPress hosting support or the Speed ​​Test tool, then this means you need to reduce the size of your images.

[Himanshu77]

Very basic thing to do is avoid using PNG and use JPEG or JPG wherever possible.

[JeanMilburn]

Use Alt text reduce the file size but try the not loss quality of the image choose your image dimensions also optimise image thumnail

[priyanka_38]

Find below technique that would help you to optimize image.

• You can optimize with reducing thier size
• You need to use unique image
• image file should be Jpg format
• Image should have alternate text
• image should tile text
• Name your images descriptively and in plain language
• Beware of decorative images
• Test your images

[MikeHunterr]

[1. Reduce file size before uploading
2. Use an image optimizer like ShortPixel or Imagify
3. Host your images on a CDN
4. Add a lazy load plugin
If you’re using images on your site –which, I’m sure you are–, taking care of optimizing them is a must.

[_1_1]

Multiple Image for Multiple Devices:
Wordpress does an interesting thing when you upload images into their monthly gallery directories. it makes 3 different versions of the image with dimensions and associated file sizes for different devices. ie. Desktoo, Tablet, and Phone. It then loads the appropriate image for the screen size in php. To do this second part yourself you obviously need to send the screen size back to the server in a previous page.

HTML5 offers a good alternative for the php step using media queries right in the tag, which moves the decision of which image to use to the browser. Here is a sample (note this sample uses a <picture> tag, the srcset attribute is apparently available in the image :

<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

the
<img> tag has a similar attribure:

   <img src="hero-big.jpg" 
 srcset="hero-small.jpg 450w, hero-medium.jpg 960w, hero-big.jpg 1500w" 
 sizes="(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px"
 alt="Learnedia Hero" />

Lazy Loading:
These methods, coupled with a lazy load libray or writing your own lazy load routines (which isn't that hard) can dramatically improve your load time. The lazy load is obviously advantages when you have several images below the fold (below the viewport). I found a good article on lazy loading at https://web.dev/lazy-loading-images. It explains the concept and provides 3 methods, 2 javascript, and one new loading attribute for the <img> tag in html5 It also recomments a few lazy-load libraries, a few of which will lazy-load divs as well.

I'd wait a while on relying on the loading = "lazy" attribute for alt tags. It's relativly new, so not so older versions of browsers may not suppor it yer.
Chrome which has around 65% of the browsing community apparently started supporting it in version 77, which came out in September of 2019.

[Doodledigital]

Image optimization is the process of reducing the file size of your image as much as possible without sacrificing the quality so that the page loading time remains faster. When creating a new blog, some new bloggers simply upload bulky images without any optimization. These large images can make the website load slower.

There are many benefits of optimizing your images like-

1. Start with high-quality images
2. Use appropriate image File Format
3. Name your images descriptively and in plain language.
4. Resize images to optimize page speed
5. Optimize your alt attributes carefully.
6. Use image sitemaps.
7. Reduce the file size of your images.

[Rushba]

Image optimization work by using compression technology like “Lossy” and “Lossless” which helps reduce the overall file size without any noticeable loss of quality. Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

[geekinformatic]

One of the easiest ways to improve your site's performance is by optimizing images. Reducing the size of image files enables your site to load faster. Some methods which are publicly used :
1: Use your site's CMS or web application
2: Use an online service
3: Use a client application

These are the key area where you can work to optimize your images

Finding the right image (relevant to the topic)
Use ALT text
Choose the right file name
Choose the right format
Scale for image SEO
Use responsive images
Reduce file size