GitHub - yahoo/blink-diff: A lightweight image comparison tool.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
The picture element | web.dev
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
Compressor.io - optimize and compress JPEG photos and PNG images
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
PSD Viewing & Diffing
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
Fast load times | web.dev
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
CSS Image Orientation Lands in Firefox 26 - Psychic Core Dump
It’s never been easier to share your digital photos on the web, thanks to modern smartphones and digital cameras. For web developers, however, dealing with user-generated digital images can be far from simple. A significant mismatch exists between the web, where the orientation of an image is determined by how its pixels are stored, and digital photography, which increasingly relies on metadata to
GyazoライクなGIFスクリーンキャスト共有ツール「Gifzo」をリリースしました - 海峡
Gyazoのように画面のスクリーンキャストをGIFアニメで撮れるツール「Gifzo」をリリースしました。 Gifzo Gifzoとは Gifzo from Kazato Sugimoto on Vimeo. Gifzoは宇宙一簡単にスクリーンキャストを共有できるサービスです。画面のキャプチャ動画をGIFアニメで超簡単に共有することができます。 画面領域を選択して録画すると自動的に動画がアップロードされて、撮った画像のページがブラウザに自動的に表示されます。Gyazoと似た操作感でとてもシンプルに使うことができます。 Gifzoでできること Gifzoを使えば、画面上の"動き"をとても簡単に共有することができます。Webサイトの録画、UIの動作の共有、アニメのキャプチャなど様々な用途で使うことができます。 また、Gifzoではできるだけ画質を落とさないように画像を圧縮するため、綺麗で低容量な
altはつけるだけじゃなくて - 実践アクセシブルHTML 第一回
この記事は、2003年6月17日発売の技術評論社「Web Site Design Vol.8」での連載記事「実践アクセシブルHTML」第1回の元原稿を、著者自身が公開しているものです。 画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、た
Data URIs make CSS sprites obsolete - Human Who Codes
Posted at July 6, 2010 by Nicholas C. Zakas Tags: CSS, CSS Sprites, Data URI I was sitting in a talk given by Facebook’s Jason Sobel at Velocity this year, when I was a bit surprised by an impassioned plea that he made at the tail end of the talk. To paraphrase, Jason said that CSS sprites require too much work for average web developers and that we should be pressuring the browser vendors to make
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
ImageOptim — better Save for Web
ImageOptim makes images load faster Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality. Faster web pages and apps Reduces image file sizes — so they take up less disk space and download faster — by applying advanced compression that preserves quality. Image files scrubbed clean Removes invisible junk: private EXIF metadata from digital cameras, em
Saving images and files in localStorage – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Andrea Gimmarchi Sorry guys, but I think this post is misleading. We don’t even have control over localStorage size and you guys are suggesting to store files in an o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sauspiel/rework-sass-images: Sass/Compass image size functions written in JavaScript as a Rework plugin
https://design-spice.com/2012/06/13/responsive-web-design-image/