What is the best image format to use today?

Qual é o melhor formato de imagem para usar hoje?
Imagens que substituem JPEG, PNG em formatos mais claros e de boa qualidade e os principais, assumidos pelos navegadores atuais.
Você gostaria de trocar informações sobre esses formatos e até mesmo a tendência de layout, bootstrap, Wordpres, angular?
Qual é a opinião dos colaboradores? para criar um site moderno com recursos atuais e funcionais em várias telas e plataformas. Isso permitirá ter as diretrizes e conhecer as vantagens e desvantagens de cada projeto.

Um abraço a todos.

Ola @Lucena, welcome back to the forum.
Just like mentioned with your previous post/topic (which you translate and is still unclear to me).

Can you post in English so we can understand you…

There are many users here on the Pinegrow forum that are willing to help,
but we need to communicate in English so everybody can read and understand.


If that is too difficult for you (which I can understand), maybe you can ask a friend, neighbor or family member to assist and help you translate your questions and comments to (clear) English.

It’s impossible for us to take a “language course” Portuguese! :wink:

1 Like

If you have transparency in the image than PNG is the best option.

JPG for most things none transparent.

SVG if it is purely a vector image.

GIF if you want animation.

2 Likes

Hi Terry, thank you for your help.
Yes I know the formats mentioned, but the lightest formats for fast loading, such as WebP and others;
I’m trying to load the page in 2.2 s or next to it.

I wouldn’t use WebP images. They’re not supported at all by Safari (Apple devices) older versions of Firefox, or any versions of IE. Also, there’s not much anyone can do with them. They aren’t easily shareable, and they can’t be easily opened in many graphics applications. To maintain compatibility with older browser would necessitate adding a lot of additional code to your site, which would only slow it down further.

Page load speed is determined by numerous factors, not just the size of your images. If your page if very graphic-heavy, you may want to lazy-load the images, so the area above the fold renders first.

Without seeing your actual code, it’s hard to say what factors are impacting your page load speed.

1 Like

We use webp with jpg (optimized with jpegMini https://www.jpegmini.com/). There is absolutely no need to edit webp in an editor. You can work in jpg, TIFF or PNG and then at the end convert to webp.

Webp can be normal or transparent!

Safari is the only up to date browser that doesn’t read webp and people with older versions of Firefox or IE get jpg served. The majority of people is using the Chrome browser.

See here how it works by looking at the source of the website:
www.yourweblab.nl/full-screen
Notice my system working by making the browser smaller or wider.

A Bootstrap 4 website with webp and jpg fallback:
www.wilart.nl

I can’t find any reason not to make your websites blazing fast!

1 Like

There are currently 700 million iphones in use worldwide. There are roughly 100 million Mac computers. Most of these devices use the Safari browser. That is a significant minority which cannot be ignored.

If an ordinary, non-graphics savvy user downloads a WebP image from a website (right-click > save), they are basically stuck with a useless image. It doesn’t open natively on a Windows computer without downloading a codec. It doesn’t open on Apple products. It doesn’t open in Photoshop without an extension. Most people simply won’t know what to do with the file. They can’t upload them to Instagram. They can’t send them to friends because people won’t recognize the file format, and they’ll assume they’re spam or a virus.

The only place they are of any use is on websites, and while it’s true that they generally compress to much smaller sizes compared to the same image as a jpg, their is a slight loss of quality in some cases. Softening, artifacting, saturation issues, and blockiness in gradations. But the important difference is this… for small images (say less than 600px x800px) the difference in size between WebP and Jpg does not equate to a huge difference in loading time. Tenths of a second in most cases. But for larger images, which are typically going to be used for photo galleries, most people don’t want to sacrifice image quality.

I ran your site www.yourweblab.nl/full-screen through Google pagespeed insights and got 95 mobile and 96 desktop, which is quite fast, but that’s to be expected since there is only one image.

I ran a site I’m building right now, https://www.eliteinsights.com/ which uses good quality jpg and png images, AND has a slideshow, and I scored 81 mobile and 96 desktop. Almost the same as yours. So switching to WebP would be a pointless waste of time for me, and big headache to code all the image fallbacks. So, why bother?

Further, 90% of the websites I build are for clients in areas served by high-speed internet, so the difference in WebP file sizes would have an almost unnoticeable impact on site loading speed. I suppose in regions of the world where they don’t have 4G or broadband, WebP would make sense, but not in most populated parts of the U.S.

Right now, Google and other companies are pushing to save bandwidth and transfer volume to keep up with the growth of the web, but it’s a wasted effort. In ten years, 5G or similar will be ubiquitous, and the globe will be served by satellite hi-speed internet, so all these formats like WebP and Accelerated Mobile Pages will be for naught. Every web page, no matter how complex will load in a second or two.

It reminds me of way back in the days when hard disk storage was very expensive, and we used to use compression and decompression algorithms on every file written and read so we could fit more stuff on the disk. Now, storage is so cheap nobody even cares how big a file is.

1 Like

Thanks for the detailed reply!

[http://gs.statcounter.com/os-market-share/mobile/worldwide](stat counter/statistics/266136/global-market-share-held-by-smartphone-operating-systems/)
Just hoover over the graphic chart to see: Android 76% and IOS 22% world wide use

No matter what your arguments are today it’s smart to use webp for SEO reasons and create a jpg fallback for others. Notice in my websites that even the jpg’s are optimized with jpegMini and also serve a particular image for a particular device and screen width and pixel density.

Of course the creation of the images is automated in apps like this:
https://www.responsivebreakpoints.com/
otherwise it would be madness I agree!!

Click here to see an image of the statistics:
StatCounter-os_combined-ww-monthly-201806-201906|690x388

1 Like

First of all, thanks for the participation of Amigos!
I see that it is still a matter of choosing between best reach to all devices, in this case without using the webp; or work towards better SEO using images with traditional extensions.
I believe there is a lot to be neglected, it would be interesting for more colleagues to give an opinion, so we have a more realistic option for each case.
Let’s continue this chat !!:chart_with_upwards_trend:

No it’s a matter of combining both worlds in one solution!
example website

See this example of a simple image in one of my websites this works on every device:

’ <source media="(max-width: 3500px)" ’
type=“image/webp”
data-sizes=“auto”
srcset=“data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”
data-srcset="
Responsive-Images/Home/kantoor/kantoor-webp/pand-plus-punt-600px.webp 600w,
Responsive-Images/Home/kantoor/kantoor-webp/pand-plus-punt-900px.webp 900w,
Responsive-Images/Home/kantoor/kantoor-webp/pand-plus-punt-1300px.webp 1300w"
Responsive-Images/Home/kantoor/kantoor-webp/pand-plus-punt-1600px.webp 1600w"
’ class=“lazyload img-responsive”>
<img
data-sizes=“auto” ’
data-src=“Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-600px.jpg”
srcset=“data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”
data-srcset="
'Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-600px.jpg 600w,
Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-900px.jpg 900w,
Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-1300px.jpg 1300w"
Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-1600px.jpg 1600w"
src=“Responsive-Images/Home/kantoor/kantoor-jpg/pand-plus-punt-600px.jpg” class=“lazyload img-responsive”
alt=“responsive images”>

WebP may be a viable choice down the road, when it becomes more universally adopted. For now, I don’t see the point. SEO is not affected by which image format you use, only by overall page speed, and as I’ve demonstrated, there is virtually no penalty incurred from Google Pagespeed Insights using current standard image formats.

Some years ago, Facebook tried switching to the WebP format and users went bonkers complaining because they couldn’t do anything with the files. So they abandoned it.

In order for WebP to become a preferred format fon websites, you first need the major operating systems (Apple and Windows) to fully support it, you need universal mobile support, and you need Adobe to embrace it, because that’s the graphics workhorse that most agencies use.

I’m not saying WebP doesn’t have advantages, but just because something is technically better, doesn’t mean the world will embrace it. The metric system is better than the imperial system, and we still don’t use it here in the U.S. Betamax was better than VHS and VHS won. SACDs were vastly better than MP3s, but MP3s won.

https://www.pluspunt.biz/

This site scores 77 and 87 on mobile and desktop. Do you know what is slowing the loading down by almost a second? Unused CSS.

There are better ways to speed up your site than shaving a few hundred kilobytes off a handful of images.