Next.js Discord

Discord Forum

What is better webp jpg png?

Unanswered
Николя posted this in #help-forum
Open in Discord
Hello everyone, I would like to know which format is better, on the one hand, webp increases performance quite a bit, and on the other hand, png jpg are perfectly supported in og meta. What do you think is better to use and is it true that webp is not supported on most platforms?

22 Replies

@joulev use webp in on-document images and png for metadata images webp is supported in all modern browsers now <https://caniuse.com/webp>
Oh, okay,i think it`s great idea!Will this greatly improve optimization? Since my page seems to me to be showing rather poor results on it, I’m looking for a way to somehow improve optimization
@joulev yes. webp is significantly smaller than png/jpg, so loading them will be significantly faster
If you have a minute, could you look at it and suggest how it can be improved, if it doesn’t take much time and doesn’t distract you?
@joulev yes. webp is significantly smaller than png/jpg, so loading them will be significantly faster
@joulev hmm what is your question
https://demon-cave.club/choose
Do you think this is normal optimization?
It seems to me that it needs to be done better, it shows poor results in web speed insight, so I want to improve it somehow
Now I have added a skeleton for the series, but I don’t think it will have much effect
I've been racking my brains about this all night, but nothing works...
well whatever query in the server component you are running, it is running slow
cache it
But I thought I was caching it
It looks something like this
import React from 'react'
import style from './styleChoose.module.css'
import ServerButton from '../Components/buttonS/ServerButton'
import Image from 'next/image';
import ph from '../../public/cool.png'
import { callAnime } from '@/db';

export const revalidate = 3600;

export const metadata = {
  title: 'Дивитись всі сезони та серії Клинок, який знищує демонів',
  description: 'Шукаешь серії Клиночка в найкращій якості та озвучці? Ти за адресою, поглиблюйся у захопливий світ перевтілення із демона у справжнього Хашіра разом з нашим великим вибором серій та сезонів.',
  keywords: 'озвучка, Хашір, демон, анімесерія, аніме, українське озвучення, дивитися, онлайн, демони, усі серії, усі сезони, "Клинок знищує демонів" всі серії, дивитися Demon Slayer, вибір серії клинок, нові серії клинок українською',
  openGraph: {
    title: "Дивитись всі сезони та серії Клинок, який знищує демонів",
    description: "Дивись всі серії та сезоні твого улюбленого аніме на найкращому фан-порталі Печера демонів",
    images: '/cool.png'
  }
}


async function page() {

  const series = await callAnime('SELECT * FROM series WHERE ReleasData <= NOW() AND VideoSr IS NOT NULL', []);

  
  return (.............)}
I thought I cached it and it updates every hour
there is a waterfall at 10s here but not really sure what could be causing it
does it load faster if you just remove the images? (though obv that isnt the fix)
the page taking 11s to load is, of course, not liked by google lighthouse
at times like this i just remove parts of the page until that 10s waterfall is gone
then that is the culprit
after you find out the culprit, it's much easier to fix
Oh, great idea
Thank you very much bro, I'll go try it now