#webp image compression

[netscapenavigator-official]

It's actually so cool that WebP can have an Alpha Layer and be Lossy. Whoever argued with me and changed my mind on WebP, I (and my storage mediums) will forever be indebted to you.

[brandgurus]

Convert Images Between WebP and PNG Formats for Free

As someone who runs a small business online, I'm always looking for ways to optimize my images without sacrificing quality. That's why I was excited to find webppng.com, a free online image converter that lets you quickly switch between WebP and PNG file formats.

For those not familiar, WebP is an advanced compressed image type created by Google that can drastically reduce file sizes compared to PNGs. The only catch is that some older browsers don't support WebP.

That's where webppng.com comes in! Their free WebP to PNG converter lets me upload my WebP product photos and download optimized PNG versions compatible with more websites and apps. And when I have PNGs, their PNG to WebP converter lets me benefit from the smaller file sizes of the WebP format.

I love that webppng.com offers:

Fast bulk conversion right in your browser

Preserved image quality with customizable compression

An easy drag and drop interface that's simple to use

Unlimited usage with no hidden costs or limits

Being able to seamlessly switch between WebP and PNG has been a huge help for my small online store. I can have smaller WebP files for modern browsers while still supporting PNGs for maximum compatibility across platforms.

If you work with lots of product images like me, I'd definitely recommend checking out webppng.com's free WebP and PNG converter. It's an easy way to optimize your site's images for speed and performance.

[mxbo]

I couldn't fit the tutorial on a reply lmao, here's a full post explaining my process :]]

STAMP TUTORIAL (TF2 edition, but works for everything)

99% of the process is done on the website ezgif. Ezgif carries the stamp-making process lmao

1. Get your GIF

Tenor: Ok place to grab your GIFs. Average quality of the GIFs is good enough, and looks ok when resized to the size of the stamp. You'll find like 1 normal GIF every 4 buff characters GIF tho.

GIPHY: Average quality of the GIF is better (I don't think the web compresses the GIFs that are uploaded)… If you find what you're looking for. You'll have to SCROLL before finding what you're looking for because there are always non-related GIFs on the top of your searches or the same GIF multiple times, it's crazy.

makeagif: You will find cool GIFs, but the quality is pretty low (I think the web itself compresses the GIFs a lot). It looks bad even when resized down. And it has a watermark, which I recommend cropping because it's not even visible when resized, it just looks like a gray blob on the corner.

Google: Best option by far, quality is pretty good and the ratio of “things I was looking for/things I actually find” is SLIGHTLY in favor of “things I was looking for” (and most of “things I actually find” are just the characters rotating, not NSFW, so that's only a nice change from Tenor). You won't have to scroll much to see different and interesting GIFs. JUST REMEMBER TO FILTER BY GIFS.

You search whatever > Images > Tools > Type > GIF

Make it on your own: Aka, you download your video, go to ezgif's “Video to GIF” (then you can crop it, CUT IT. THIS IS IMPORTANT, YOU DON'T NEED TO GO ANYWHERE ELSE TO CUT YOUR CLIP, YOU CAN DO IT ON EZGIF ITSELF). Ok, I lied, it wasn't Google, this is the best oftion by far. You get exactly what you want, the best quality if you don't compress it much until after the GIF has been resized into the size of a stamp… It's just super time-consuming, and you'll have to spend like an entire hour just watching a video to find the clips.

OK, I HAVE MY GIF NOW

Hehe, his legs go pipupipu

2. Resize

Go to ezgif, this is where the fun begins (if you weren't on ezgif already). You download your GIF, or copy the link and insert it, or you'll have it there if you made it yourself.

A STAMP MAKES 99px × 56px

THE INNER PART OF THE STAMP MAKES 91px × 47px

I RECOMMEND MAKING YOUR GIF 92px × 48px

BTW, THESE MEASURES ARE FOR THE TEMPLATE I'LL GIVE YOU LATER. If you use another template, just go to an image editor and see what the inner size of the stamp is.

So, you set your GIF's width to 92px.

Then crop it, so your height is 48px.

Or you can resize it so it's directly 92px × 48px, but the crop will be in the center, and SOMETIMES YOU DON'T WANT THAT.

For example:

It's a vertical GIF whose area of interest is not in the center, so if we resize it directly-

oops-

ANYWAY

Once you have your GIF resized:

IMPORTANT: BEFORE THE NEXT STEP, REMEMBER TO CONVERT TO GIF IF THE FILE YOU'RE WORKING ON ISN'T A GIF ALREADY

Sometimes you'll be working with a webp without even noticing (EW, I hate webp) and transparencies don't work particularly well with that extension.

3. Overlay

Click on this icon.

Ok, now that that's fixed:

Extend the size of the canvas.

Select your template and Upload image!

This is the template, btw.

Then move the overlay around until it contains the GIF nicely, or just set Left to 43, Top to 20 and Generate image! (I have these numbers memorized, it saves you like 20 seconds lmao)

Also, again, these numbers work on MY template, if you use another one, you'll have to figure it out yourself.

4. Crop

THIS OPTION IS A TIME-SAVER FR

5. Optimize (optional, highly recommend)

I always set my optimization method to Lossy GIF and level 10 because I find that there is no quality loss, and the file size might drop by 30%-70% (actually crazy). These percentages don't change much in higher compressions, even though you'll start seeing a drop in quality around level 35 of compression (the default).

6. Save

YIPPE!!! Your stamp is done :D

You can save it and look at it and place it on your profile or website.

Here it is btw, in case someone wanted it :]] The Sniper GIF but correctly cropped and made into a stamp as well.

Now do that another… eleven times, and you'll have a stamp pack to make into a Tumblr post... Oof TT

There's no website that lets you make stamps faster lmao (I wish)

@sir-broken-bones (I'm @ them so they actually see it, I made this tutorial for them after all lol)

[kawaoneechan]

My last reblog reminded me of a related thing.

Converting GIF to MP4.

I mentioned that sometimes turning an image into a WebP file actually makes it larger, right? And that it turned crisp pixel art into jpeg vomit?

GIF to MP4 is perhaps even worse.

For video clips, you can make a point, sure. I won't argue, it works great on those. Different compression systems for different inputs, y'know? Right tool for the right job?

But then you drop some nice pixel animation on Twitter or whatnot. The gif was of manageable size to begin with and crisp as hell. And Twitter converts it to mp4, you get weird quirks involving the final frame's duration which is why Aseprite has a checkbox in the gif exporter to compensate, your crisp pixels fucking melt, and if you're particularly unlucky the mp4 version will be bigger than the original, completely subverting the bandwidth argument.

But wait there's more!

They say gif files are always auto-play. That's technically true, there's no such thing as a play button on a gif... or is there? Discord for example extracts the first frame to a PNG and so long as the gif isn't fully scrolled into view it actually shows that static image instead, switching between two files as you scroll it in and out of view. So why not extract a static image, have a little play button, and when you click it the gif is swapped in? You can't pause it, but you can prevent auto-playing!

Argument two, related to the auto-play thing: shocking trap clips. First frame or two is fine, then suddenly blam you get to see something horrific instead. Well. Guess what?

It doesn't matter if it's auto-playing or not, if it's a gif or an mp4. Shocking trap clips are shocking traps. They're just one or two levels above trying to download a 640x480 picture of Anna Kournikova on a 56k dial-up connection only to find from the neck down they replaced her with a horrifying monster. And that is a single image.

I'm done here.

[pixelsgarage]

Hello there! this isn't a request, But I was wondering how you make your graphics Is there any specific sites you use or stuff like that?

Hey! I already made a vague tutorial on my blinkie making process.

For userbars and shiny buttons, I have a .kra template and simply edit the text and colors and whatever to whatever is requested. The shiny button template was mostly original but the userbar template was made with the help of this tutorial.

EASY PEASY STAMP MAKING TUTORIAL BELOW VVVV

For stamps, I use an edited version of this template.

While for most of my original stamps I use a method similar to my blinkie-making method, I also like to convert GIFs I find online into stamp format! This is a really easy streamlined process and I wanna show it off.

1. Import your GIF of choice into Ezgif, whatever selection works.

MAKE SURE IT IS .GIF AND NOT .WEBP OR OTHER, AS THEN IT WILL NOT WORK!

2. Depending on what size your image is, you will either want to crop first or go to Resize immediately. If your image is 4:3/16:9 and focused the way you want, go to step 3.

Crop your image in the editor the way you want it to display. Try to leave a little room for the focus of the image so it isn't cropped out later.

Once you're done with that, you can proceed to the Resize menu from the bottom selector.

3. Resize your GIF to 99 by 56 pixels. That is 99 in width, 56 in height. Try not to tweak with any of the other settings.

Once you're done with that, go into the overlay option from the bottom selector:

3. Overlay

Upload one of these as your overlay, or make your own with the same format. Make sure it has a greenscreen/removable background around the parts you want to be transparent. The 1st one is newer and the one I typically use.

It's the same resolution so you don't have to move anything around. Once you generate that, go into the effects menu from the bottom selector.

4. Remove the greenscreen and you're done!

In the "Replace color with transparency" tab, set it to custom (HEX) with the value #00ff00 or whatever color you chose to replace transparency. This part is the reason you can't use webps, for some reason this part doesn't work very well with those.

YOU JUST MADE A STAMP CONGRATULATIONS! You can also do this manually but this method is easier if you're just compressing down a gif.

[breadstyx]

I'm working on a website for a comic (those who know, know) and it gives me a good opportunity to talk about the modern web innovation that's #1 most reviled on here: webp.

I was working on image quality. See, the author made the pictures high-quality, and since they're hand-drawn it's absolutely worth it — but it means we're talking ~2500x1100px PNGs. Which means ~2-3MB per picture.

Since on the actual website they'll be displayed at 1000px width, smart old me figured a pretty quick fix to save on readers' bandwidth would be to reduce the image size to 1000px width (after all, that's over 5x smaller than the original!).

The issue though: quality surprisingly suffered. Specifically there was a notable impact to the text (but also the colours and texture, if you look closely).

So I started wondering how exactly one could get a cleaner output from my image downsizing.

Which I spent the next 5 hours trying to crack. Turns out it's not easy.

On the other hand, there is another approach: simply finding a better way to store the image. On JPEGs and PNGs you can play with various compression settings which might help you reduce that file size without compromising quality (I tried a bunch, no dice!), but you could also switch to another format. For example, you might consider webp.

Here's what it brings to the table.

"-original" files are the HD originals, "-large" files are the blurry resized ones, "-optimized" are the webp ones.

They are 13-15 times lighter at the same size. This makes them even lighter than the 1000px-wide ones. (2 to 3 times lighter! despite being 5x bigger! that's insane!)

And the output:

I couldn't tell you which capture I took from which version.

And like, damn, that's p cool.

[prudenceanagram]

I have completely Rephotographed my physical media for the website update. I will not be reposting all of them here, but here is a selection of four that I think benefit the most strongly from the new photography. Obviously they are squished by social media image compression, but on the website they will be webps of generous size for you to look at. Thank you!

[ntrlily]

Frequently asked questions:

[Anything related to dual-booting]

Shit idk I have literally never dual-booted. I have never dual-booted Linux and Windows, I have never dual-booted Linux and other Linux, and I have never dual-booted Linux with any BSD distro. My condolences for any struggles you may experience in your journey, of putting two operating systems on one computer.

What do you have against physical media?

Putting aside for a moment that as a pedant I am not a huge fan of the term (all storage is physical storage, but I understand the intended meaning) nothing in particular. There are some major disadvantages compared to sticking shit on a hard drive but by the same token, there are some notable advantages depending on the situation.

The actual problem I have is that the conversations around this topic around these parts are ill-informed and I wish people would stop having them in my notes. If you are going to say something along the lines of "physical is forever" (inaccurate: x, x, x, x, etc) please either distill that into a more accurate statement or put it on your own posts instead of mine. If you are going to tout physical as a format that is safer from DRM consider not doing that. Thank you.

Why are you a defender of the .webp format?

webp offers significantly smaller filesizes compared to the older png and jpeg formats, and it's a versatile format with the option of lossless compression (like pngs), lossy compression (like jpegs) as well as animation (with very significant filesize reduction compared to gifs)

So you can get smaller filesizes on images with larger dimensions or more detail, allowing for one to have both faster-loading webpages and fancier graphics at the same time. While some image editors and defunct operating systems still do not natively support webp display, the number of major image editors with zero support is increasingly small and at some point support for dated systems needs to take a backseat to consideration for the bandwidth of users with slow internet and/or data caps. PNG used to not have wide support either and it's a well-liked format now.

Links of interest: nuwen.net png introduction, webp vs png comparison by tumblr user breadstyx

(I link the nuwen png page as an example of how and why we've made transitions like this in posting images on the web before! It can be a bit awkward and painful, but the benefits are worth it)

About Me:

Haver of Ritsu Syndrome (Instead of brain, there is Ritsu Shikishima from Caligula (anime))

VNs on my hill: Sweet Pool, Masquerade, Flowers, NO, THANK YOU!!!, Hanachirasu

Currently reading: Lkyt., Fate/Stay Night, Full Metal Daemon Muramasa, Tsukihime, Slow Damage

Plan to read: LipTrip ~My Boss Is My Heat Suppressant?!~

[aiseoexperteurope]

How to optimize images for beter AIO, (AI Search) Google AI overview, Perplexity, ChatGPT

(1) Research the mechanisms by which AI search engines like Google AI Overview, Perplexity, and ChatGPT analyze and interpret image content, including their use of computer vision and contextual understanding from surrounding text. (2) Identify general best practices for image SEO that are beneficial for AI search, focusing on elements such as descriptive alt text, meaningful file names, image captions, and the relevance of on-page textual content to the image. (3) Investigate specific recommendations or documented guidelines from Google on how images are selected and utilized within its AI Overviews, and how to optimize for this feature. (4) Explore how Perplexity AI incorporates and ranks images in its responses, and search for any specific advice or patterns related to image optimization for its platform. (5) Research how ChatGPT (especially versions with browsing capabilities or image understanding features) processes visual information and what factors might influence image visibility or interpretation by the model. (6) Analyze the role and benefits of using structured data (e.g., Schema.org markup for images) in enhancing the discoverability and comprehension of images by AI search algorithms. (7) Evaluate the importance of technical image attributes such as resolution, compression, file formats (e.g., WebP, AVIF), and mobile responsiveness for AI search performance and user experience. (8) Synthesize the findings to provide a comprehensive guide on optimizing images effectively for improved visibility and understanding by AI-driven search systems, including Google AI Overview, Perplexity, and ChatGPT.

[thevisionarywriter]

5 Smart Image Optimization Tips to Boost Your Photography Portfolio Website

A photography portfolio is your digital first impression—and while high-quality visuals are a must, slow-loading images can ruin the experience. If your website takes too long to load, visitors may leave before they even see your work. That’s why optimizing images is essential for both performance and SEO.

Here are five key image optimization strategies that will help you create a fast, professional, and search-friendly photography website.

1. Choose the right file format Using the correct file format ensures that your images load quickly without compromising quality. JPEG is ideal for most photos, offering good compression with minimal quality loss.

PNG is ideal for images that need transparent backgrounds or precise, sharp edges, such as logos and graphics. WebP, supported by most modern browsers, offers superior compression, reducing file sizes even further—often 25–35% smaller than JPEGs while maintaining clarity. By selecting the right format, you improve load times and enhance site speed.

2. Resize images to display dimensions Don’t upload images in full resolution unless absolutely necessary. Large files from your camera—often 5000px wide or more—are much bigger than most screens display. Resize your images to match the dimensions they’ll appear on your site, such as 1200px or 1920px wide. This significantly reduces file size and improves page load speed. Use tools like Photoshop, GIMP, or online editors to resize before uploading.

3. Compress images without losing quality Compression reduces file size while preserving visual quality. Tools like TinyPNG, JPEGmini, or ImageOptim can cut down the size of your images without making them look blurry or pixelated. For WordPress users, plugins like ShortPixel or Smush automate this process. Always test the image quality after compression to maintain a balance between speed and visual impact.

4. Use SEO-friendly filenames and alt text Search engines can't interpret images without context. Rename files like IMG_0101.jpg to something descriptive, such as sunrise-over-grand-canyon.jpg. Also, add alt text that describes the photo accurately—for example, “Landscape view of the Grand Canyon during sunrise.” This boosts image SEO, helps visually impaired users, and improves your chances of appearing in Google Image Search.

5. Enable lazy loading and use a CDN Lazy loading defers the loading of images until they come into the user’s view, boosting the page’s initial load time and improving user experience. Most modern platforms include this feature or offer plugins. Additionally, use a Content Delivery Network (CDN) like Cloudflare or ImageKit to serve images from servers closest to your visitors. This significantly speeds up loading, particularly for users around the world.

Conclusion Optimizing your images is essential if you want your portfolio to load fast, rank high on search engines, and impress your audience. These five tips—choosing the right format, resizing, compressing, adding SEO-friendly text, and using performance tools like lazy loading and CDNs—will elevate your site’s speed and visibility. Make your work shine online without slowing things down.

[smithadam4520]

How to Speed Up Your WordPress Site for Better Rankings

A fast-loading website is essential for better SEO, improved user experience, and higher conversions. If your WordPress site is slow, you’re likely losing both visitors and ranking opportunities. Here’s how you can fix that.

Choose the Right Hosting

Your hosting provider sets the foundation for your website’s speed. Shared hosting may be affordable, but it often leads to slow performance. Instead, go for managed WordPress hosting or cloud-based options. Many professional website development services include high-performance hosting setup as part of their package.

Use a Lightweight Theme

A bulky, feature-heavy theme can slow your site down significantly. Switch to a lightweight and optimized theme like Astra, Neve, or GeneratePress to improve load time without compromising design.

Optimize Images

Images are often the biggest contributors to page size. Compress them using tools like ShortPixel or Smush, and use next-gen formats like WebP for faster delivery.

Install a Caching Plugin

Caching helps by storing static versions of your site, reducing the server load. Plugins like WP Rocket or W3 Total Cache can make a noticeable difference in performance.

Minify and Combine Files

Reduce the size of your CSS, JS, and HTML files by minifying them. This removes unnecessary characters and spaces to speed up load time. Tools like Autoptimize make this easy.

Use a CDN

A Content Delivery Network (CDN) distributes your content across multiple servers globally, ensuring faster access no matter where your visitors are located.

Clean Up Unused Plugins and Database

Too many plugins can slow your site and affect performance. Remove what you don’t use and regularly clean your database using WP-Optimize or similar tools.

Final Thoughts

Speed is a major factor in how users and search engines interact with your site. If you’re unsure where to start, partnering with expert website development services can help you optimize every technical aspect for maximum performance and SEO benefits.

Read more -https://www.janbaskdigitaldesign.com/wordpress-website-design-and-development

[ranidspace]

GIF is a terrible file format. (256 colours per frame, framerate can only be expressed as "100/n", just shit in general)

some places (e.g. twitter and discord) just use use modified mp4s with no sound that loop, and some places (like tumblr!) use gifv, which is just a modified html which isn't standardized at all, which usually just includes a gif file or a webm.

So what's the best actual option for a dedicated file type for static and animated images

i found there's actually a file format that supports full 24 bit colour, you can control the framerate to whatever you want up to 1000fps, supports lossy AND lossless intraframe and interframe compression, and is supported chromium, firefox and safari (probably over 98% market share of web browsers)

and

it's

fucking

WEBP

please. can apps just add support for it. it's not a bad file format by itself it's just. it's just fucking used everywhere in browsers but no actual programs support editing and exporting them. please