DEV Community: hiroaki yamashita

Let's learn WebP before introduce it

hiroaki yamashita — Sat, 25 May 2024 18:07:43 +0000

What's the WebP

WebP is a powerful image format developed by Google that prioritizes both smaller file sizes and high image quality.
Launched in 2010, it's recently gained significant traction due to:

Internet Explorer's Retirement (June 2022)

Previously, Internet Explorer's lack of WebP support hindered its adoption. With its discontinuation, WebP has become a viable option for websites seeking faster loading times.

SEO and User Experience Benefits

Smaller image sizes translate to faster page loads, a crucial factor for both search engine ranking and user experience.

Advantages of WebP

Reduced File Size

Compared to JPEG, WebP offers 20-80% smaller file sizes while maintaining similar image quality. This significantly improves website loading speed.

Minimal Quality Loss

WebP utilizes advanced compression techniques that minimize image quality degradation.

Supports Transparency

Unlike JPEG, WebP offers lossless compression with transparency, similar to PNG. This makes it ideal for graphics with transparent backgrounds.

Things to Consider with WebP

Limited Editing Software Support

While popular image editing software like Photoshop and Illustrator can't use WebP files, if these are old version.

Compatibility with Applications

WebP files might not be directly compatible with certain applications like Microsoft Office. By the way, it can't paste dev.to.

Converting Images to WebP

There are several methods to convert images to WebP format:

Squoosh

This free web app by Google allows you to convert images directly in your browser without uploading them to a server.

This ensures security for sensitive content. (https://squoosh.app/)

Saruwaka

This online service offers batch conversion, making it ideal for converting multiple images at once. (https://www.canva.com/features/image-converter/)

Command Line

The official WebP website provides command-line tools for conversion.

This method offers greater control and automation but might be less user-friendly for beginners. (https://developers.google.com/speed/webp/docs/using)

Summary

By adopting WebP, you can significantly enhance your website's loading speed, improve user experience, and potentially boost your SEO ranking.

Remember to consider compatibility with other applications and editing software for a seamless workflow.

Japanese standard stock photos

hiroaki yamashita — Thu, 16 May 2024 17:47:29 +0000

There are many free image sites around the world.
Many sites require a fee or registration

You might be worried about security if you use a company PC.
At first, you might think, 'I can't pay for just one free photo!'

This is understandable.

this time, i introduce free and no registration images sites by genre that i usually used.

classic in Japan

Irasutoya

https://www.irasutoya.com/

PAKUTASO

https://www.pakutaso.com/

These images are used in every aspect of our lives.
not just websites.
For example, poster around town, presentation, YouTube, on the tv.
most Japanese people have seen these images.

both have a casual feel to them, so they may not be suitable for stylish designs.

icon

Google material symbols

https://fonts.google.com/icons
Google provides a large collection of icons that you can use.
These icons are designed for web use.
we can use these easily set cdn and input tags to source codes.

icooon-mono

https://icooon-mono.com/
This is another popular option.
we can change icon color on site.
if you need simple ions, this site and google material symbols are all you need.

illust

soco-st

https://tyoudoii-illust.com/
The images have a soft feel.
The illustrations allow you to change the theme color.
so, this is highly versatile.

tyoudoii-illust

https://tyoudoii-illust.com/
'Tyoudoii' is a Japanese word.
It translates to 'just the right feel' in English.
There are many illustrations of humans on this site.

photos

O-DAN

https://o-dan.net/
O-DAN allows you to search for free stock photos across 36 sites.

Devices from Design at Meta

https://design.facebook.com/toolsandresources/
This is a website from Meta.
This side has image of the digital devices such as smartphones and PCs.

Images are downloaded in ZIP format.
Therefore, you will need to download them using a PC.

advice

While these are free image sites, some images require attribution and may not be usable for commercial purposes.
i recommend to check carefully each sites rules before use.

For web worker! 5 extensions that will help you your work done

hiroaki yamashita — Thu, 02 May 2024 15:00:19 +0000

Past post is here

I introduce my favorite chrome extensions.
This time, I introduce 5 extensions to web worker.

Similar web

Those extensions can traffic information of web site all around the world.
It can analyze competitors site, and SEO measures.
however, free version has limitation what can access information.
And, if site traffic are very few, you can't get information.
Get Similar web

Wappalyzer - Technology

profiler
This extension let you get tech information about site. For example, framework, server, CMS, analytics tools.
You can know used tech that site in the world.
GetWappalyzer - Technology
profiler

HTML error checker

You can found Syntex error if there are any error in HTML.
Get HTML error checker

Alt & meta viewer

you can get alt of images, and meta information(title, description, ogp etc.)
Alt & Meta viewer

Pasty

I went to open multipie sites at once...
This extensions meet the needs.
You can open sites that copied clipboard.
Get Pasty

Summary

How did you this?
Tend of chrome extensions are so fast.
In some case, used service is end suddenly.
In some case, A compatible service has been released.
If you want to work expensively, I recommend to check chrome extensions regularly.

my favorite 3 Chrome extensions

hiroaki yamashita — Wed, 01 May 2024 14:51:55 +0000

I introduce my my favorite 3 Chrome extensions.

Voice In

this is especially recommend chrome extension!!
We can voice input easily on chrome.

voice input is not used much in Japan.
But, I use voice input everyday.

I usually voice input in Japanese.
so, it is difficult to input programming code by this extensions for me.
but, I wanna be speak English well, and input programming code by this extensions.
get Voice in

Video Speed Controller

this is extension that can control video speed easily.
just one touch keyboard 's' or 'd'.
get Video Speed Controller

Image Downloader

this is excellent extension.
because it can list and download all images in bulk in current page.

we do not need to open developer mode to download images.
by the way, take care copyright of images.
get Image Downloader

next time, I'm gonna introduce another chrome extensions when I using in the work.