Concorde: Download and decode progressive JPEGs on iOS

Concorde

This is a framework for downloading and decoding progressive JPEGs easily on iOS and OS X. It uses libjpeg-turbo as underlying JPEG implementation. We vendor version 1.4.0 of the static library from libjpeg-turbo's official release for convenience.

Usage

Simply install it via CocoaPods:

pod 'Concorde'

and then use CCBufferedImageView which progressively downloads and shows an image:

let imageView = CCBufferedImageView(frame: ...)
if let url = NSURL(string: "http://example.com/yolo.jpg") {
    imageView.load(url)
}

If you use Contentful, install the subspec:

pod 'Concorde/Contentful'

and replace your usage of UIImageView with CCBufferedImageView to automatically use progressive JPEGs if you have been using the UIImageView category before. This will work regardless of the original format of your files due to the image transformation functionality of the delivery API.

Manual integration

You can also integrate Concorde as a subproject or download a binary build from the releases section. Please note that those are only provided for iOS at the moment.

Download Details:

Author: Contentful-labs
Source Code: https://github.com/contentful-labs/Concorde 
License: MIT license

#objective-c #swift #jpeg #ios 

Jpegtran_ffi: Mostly Lossless Transformations Of JPEG Images

jpegtran_ffi

Mostly lossless transformations of JPEG images, similar to those than can be made using jpegtran tool, e.g. cropping and rotations. Since JPEG data doesn't need to be decoded or encoded it should hopefully be fast as well.

A lossy recompress method to reduce quality & size is also included. EXIF data can be copied from the original image.

This package uses libjpeg-turbo via Dart's FFI. Unlike platform plugins it should be usable from within isolates.

Example

void cropToSquareAndRotate() {
    var jpegtran = JpegTransformer(_imageBytes);
    try {
        var info = jpegtran.getInfo();

        var cropSize = min(info.width, info.height);
        var crop = JpegCrop(
            w: cropSize,
            h: cropSize,
            x: (info.width - cropSize) ~/ 2,
            y: (info.height - cropSize) ~/ 2,
            alignIfRequired: true,
        );

        var rotate = JpegRotation(
            angle: 90,
            crop: crop,
            options: JpegOptions(grayscale: false),
        );

        var newImage = jpegtran.transform(rotate);
        setState(() {
            _imageBytes = newImage;
        });
    } catch (err) {
        _showError(err, context);
    } finally {
        jpegtran.dispose();
    }
}

Uint8List recompress(Uint8List jpegBytes) {
  var jpegtran = JpegTransformer(jpegBytes);
  try {
    return jpegtran.recompress(
      quality: 70,
      preserveEXIF: true,
    );
  } finally {
    jpegtran.dispose();
  }
}

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add jpegtran_ffi

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  jpegtran_ffi: ^0.0.8

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:jpegtran_ffi/jpegtran_ffi.dart';

example/lib/main.dart

import 'package:flutter/material.dart';

import 'CropSquarePage.dart';
import 'OperationsPage.dart';
import 'CreditsPage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "jpeg_ffi demo",
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/cropSquare': (context) => Scaffold(body: CropSquarePage()),
        '/operations': (context) => Scaffold(body: OperationsPage()),
        '/credits': (context) => CreditsPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('jpeg_ffi examples'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 40),
            ElevatedButton(
              child: Text("Crop to square"),
              onPressed: () {
                Navigator.pushNamed(context, '/cropSquare');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text("Operations"),
              onPressed: () {
                Navigator.pushNamed(context, '/operations');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text("Credits"),
              onPressed: () {
                Navigator.pushNamed(context, '/credits');
              },
            ),
          ],
        ),
      ),
    );
  }
}

TODO

• Remove unneeded parts of libjpeg-turbo
• Lossy resizing

Original article source at: https://pub.dev/packages/jpegtran_ffi 

#flutter #dart #jpeg #images 

画像ファイルの種類– .jpeg、.svg、および.png画像形式の拡張子の説明

画像を操作するときは、さまざまなファイルの種類を理解することが重要です。どのフォーマットがどのアプリケーションに最適ですか？

このチュートリアルでは、最も一般的な画像ファイルの種類と、それらをいつ使用する必要があるかについて説明します。

これは短い、非技術的な記事であることに注意してください。パフォーマンスの面でさらに深く掘り下げたい場合は、Webサイトの画像をWeb用に最適化する方法に関するこれらのガイドをお読みください。

まず、画像圧縮がどのように機能するかについて簡単に説明します。

ロスレスvsロッシー–これら2つの圧縮タイプの違いは何ですか？

可逆圧縮は、元のデータを圧縮データから完全に再構築できるようにするデータ圧縮アルゴリズムのクラスです。

ファイルに含まれる情報の一部を破棄し始める前に、ファイルを圧縮できるのは非常に限られています。

これが「非可逆」圧縮の出番です。一部の情報が失われるという点で非可逆です。

非可逆圧縮では、元のデータの近似値のみを再構築できます（ただし、通常は圧縮率が大幅に向上します）。

さまざまな画像ファイル形式を説明すると、「ロスレス」と「ロッシー」の両方の用語が下に表示されます。

JPEG形式とは何ですか？（.jpgおよび.jpegファイル拡張子）

JPEGは、画像の最も一般的なファイルタイプです。色の多い写真やその他の画像に最適です。

JPEG形式は、デジタル画像の「不可逆圧縮形式」です。それはそれがいくつかを失うことを意味します

ちなみに、JPEGはJoint Photographic Experts Groupの略で、標準を開発したチームです。

JPEGファイルは他の種類のファイルよりも小さいため、ダウンロードと共有が簡単です。

JPEGは透明にすることも、背景を透明にすることもできますか？

いいえ。GIF、SVG、PNGとは異なり、JPEGの背景を透明にすることはできません。JPEGを別のファイル形式に変換する必要があります。

.jpegと.jpgは同じですか？

はい–唯一の違いは、従来、ファイル拡張子は3文字しかないことです。「.jpg」は「.jpeg」の短縮形です。

PNGとは何ですか？PNGファイル形式（.pngファイル拡張子）

PNGは、デジタル画像の可逆圧縮形式です。PNGは、GIFの改良された代替品として作成されました。これは、Web上で最も広く使用されているロスレス画像圧縮形式になりました。

PNGは、ロゴなどの透明度のある画像に最適なファイルタイプです。PNGファイルは通常JPEGよりも大きいため、大きな画像には適していません。

PNGは背景を透明にすることができます。

GIFとは何ですか？GIF画像形式（.gifファイル拡張子）

GIF形式は、Webで一般的に使用される別の種類の画像ファイルです。GIFファイルは通常、他の種類の画像ファイルよりも小さいため、Webでの使用に最適です。

静止画像にはGIFを使用できます。しかし、それらはより一般的にアニメーション、つまり自動再生される一連の画像に関連付けられています。たとえば、これはパブリックドメインのGIFです。

回転する地球のパブリックドメインGIF

これは実際には、ループで再生される1ダースほどの一連の画像です。

GIFは背景を透明にすることもできることに注意してください。

GIFはどのように発音しますか？

GIF形式の作成者であるStephenWilhiteは、「jif」を「Jif」ピーナッツバターのように発音したと述べています。

ジフピーナッツバター。ブライアン・カントーニによるクリエイティブ・コモンズの写真。

そうは言っても、私が知っているほとんどすべての開発者は、「gift」のように「gif」と発音します。これは、これからも最も人気のある言い方だと思います。

The Tonight Showの世論調査では、5,767人の回答者の73.7％が、GIFを「gift」のように「gif」と発音したと答えています。

TIFFとは何ですか？TIFF画像形式（.tifファイル形式）

TIFFは、編集が必要な高品質の画像に使用するのに最適なファイルタイプです。TIFFファイルは大きいため、オンラインでの共有には適していません。

ファイルサイズよりも品質が重要な場合は、TIFFを使用する必要があります。実際には、特にWeb上の画像を処理する場合は、ほとんどの場合、PNGの方が適しています。

SVGとは何ですか？SVGファイル形式（.svgファイル拡張子）

SVGはスケーラブルベクターグラフィックです。これは、品質を損なうことなく、グラフィックを任意のサイズに拡大縮小できることを意味します。

この記事で説明している他のすべてのファイル形式とは異なり、SVGファイルはベクターファイルです。（JPEG、PNG、GIF、およびTIFFはラスターファイルです。）

つまり、SVGファイルは品質を損なうことなく任意のサイズに拡大縮小できますが、ラスターファイルは拡大すると品質が低下します。

ベクター編集ソフトウェアを使用してSVGファイルを編集できます（またはグラフィックの座標と色を手動で更新するだけです）。PNGファイルは、ラスター編集ソフトウェアを使用してのみ編集できます。

これは、 MozillaDeveloperNetworkのSVGファイルの例です。これは、SVGがネイティブXMLコード形式でどのように見えるかです。

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

そして、この単純なコードはこの画像をレンダリングします：

緑の点とその上に「SVG」の文字が付いた赤い正方形。

SVGファイルは画像の描画に必要なデータのみを含むため、通常はPNGファイルよりも小さくなりますが、PNGファイルには画像全体のデータが含まれます。

SMILと呼ばれるツールを使用してSVGファイルをアニメーション化することもできます。したがって、これらは非常にスペース効率の高いGIFファイルとして機能します。そして、あなたが本当に冒険好きなら、SVGをプログラムすることができます。

JPEGとPNG– Webに最適な画像形式はどれですか？

光ファイバーケーブルの展開が進み、高速衛星インターネットが一般的になるにつれて、Webの外観は将来大きく変わる可能性があります。

ただし、今のところ、ほとんどの画像にJPEGを使用することをお勧めします。

会社のロゴや品質が重要な非常に重要な写真がある場合は、PNGが適しています。

ロゴの場合は、SVGを使用することをお勧めします。これは、無限に拡大縮小でき、サイズが非常にコンパクトであるためです。

画像ファイルの種類について多くのことを学んだことを願っています。

ソース：https ：//www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/

#svg #jpeg #gif #image 

Explicación De Las Extensiones De Formato De Imagen .Jpeg, .Svg Y .Png

Cuando trabaja con imágenes, es importante comprender los diferentes tipos de archivos. ¿Qué formato es mejor para qué aplicación?

En este tutorial, explicaremos los tipos de archivos de imagen más comunes y cuándo debe usarlos.

Tenga en cuenta que este es un artículo breve y no técnico. Si desea profundizar mucho más en el aspecto del rendimiento, lea estas guías sobre cómo optimizar las imágenes de su sitio web para la web .

Primero, una explicación rápida de cómo funciona la compresión de imágenes.

Lossless vs Lossy: ¿cuál es la diferencia entre estos dos tipos de compresión?

La compresión sin pérdidas es una clase de algoritmos de compresión de datos que permite reconstruir perfectamente los datos originales a partir de los datos comprimidos.

Hay tanto que puede comprimir un archivo antes de comenzar a desechar parte de la información que contiene el archivo.

Aquí es donde entra en juego la compresión "Lossy". Con pérdida, ya que pierde parte de la información.

La compresión con pérdida permite la reconstrucción solo de una aproximación de los datos originales (aunque generalmente con tasas de compresión muy mejoradas).

Verá que los términos "Lossless" y "Lossy" aparecen a continuación cuando describimos diferentes formatos de archivo de imagen.

¿Qué es el formato JPEG? (Extensión de archivo .jpg y .jpeg)

JPEG es el tipo de archivo más común para las imágenes. Se utiliza mejor para fotos y otras imágenes con muchos colores.

El formato JPEG es un "formato de compresión con pérdida" para imágenes digitales. Eso significa que pierde algo de la

Por cierto, JPEG significa Joint Photographic Experts Group, el equipo que desarrolló el estándar.

Los archivos JPEG son más pequeños que otros tipos de archivos, por lo que son fáciles de descargar y compartir.

¿Los archivos JPEG pueden ser transparentes o tener un fondo transparente?

No. A diferencia de los GIF, SVG y PNG, los archivos JPEG no pueden tener fondos transparentes. Necesitará convertir su JPEG a un formato de archivo diferente.

¿Son lo mismo .jpeg y .jpg?

Sí, la única diferencia es que, tradicionalmente, las extensiones de archivo tienen solo 3 caracteres. ".jpg" es una forma abreviada de ".jpeg".

¿Qué es un PNG? El formato de archivo PNG (extensión de archivo .png)

PNG es un formato de compresión sin pérdidas para imágenes digitales. PNG se creó como un reemplazo mejorado para GIF. Se ha convertido en el formato de compresión de imágenes sin pérdidas más utilizado en la web.

PNG es un tipo de archivo que se usa mejor para imágenes con transparencia, como logotipos. Los archivos PNG suelen ser más grandes que los JPEG, por lo que no son ideales para imágenes grandes.

Los PNG pueden tener un fondo transparente.

¿Qué es un GIF? El formato de imagen GIF (extensión de archivo .gif)

El formato GIF es otro tipo de archivo de imagen que se usa comúnmente en la web. Los archivos GIF suelen ser más pequeños que otros tipos de archivos de imagen, lo que los hace ideales para usar en la web.

Los GIF se pueden usar para imágenes estáticas. Pero se asocian más comúnmente con animaciones, una serie de imágenes que se reproducen automáticamente. Por ejemplo, aquí hay un GIF de dominio público.

Un GIF de dominio público del globo giratorio

Esto es realmente solo una serie de una docena de imágenes que se reproducen en un bucle.

Tenga en cuenta que los GIF también pueden tener un fondo transparente.

¿Cómo se pronuncia GIF?

El creador del formato GIF, Stephen Wilhite, dijo que pronunciaba "jif" como "Jif" mantequilla de maní.

Mantequilla de maní Jif. Foto de Creative Commons por Brian Cantoni.

Dicho esto, casi todos los desarrolladores que conozco lo pronuncian "gif", como en "regalo", y creo que seguirá siendo la forma más popular de decirlo.

Una encuesta de The Tonight Show donde el 73,7% de los 5.767 encuestados dijeron que pronunciaban GIF como "gif" como en "regalo".

¿Qué es un TIFF? El formato de imagen TIFF (formato de archivo .tif)

TIFF es un tipo de archivo que es mejor usar para imágenes de alta calidad que necesitan ser editadas. Los archivos TIFF son grandes, por lo que no son ideales para compartir en línea.

Debe usar un TIFF cuando la calidad es más importante que el tamaño del archivo. En la práctica, un PNG es casi siempre una mejor opción, especialmente cuando se trata de imágenes en la web.

¿Qué es un SVG? El formato de archivo SVG (extensión de archivo .svg)

Un SVG es un gráfico vectorial escalable. Esto significa que el gráfico se puede escalar a cualquier tamaño sin perder calidad.

A diferencia de todos los demás formatos de archivo que analizamos en este artículo, los archivos SVG son archivos vectoriales. (JPEG, PNG, GIF y TIFF son archivos de trama).

Esto significa que los archivos SVG se pueden escalar a cualquier tamaño sin perder calidad, mientras que los archivos raster perderán calidad cuando se amplíen.

Puede editar archivos SVG utilizando un software de edición de vectores (o simplemente actualizar manualmente las coordenadas y los colores de los gráficos). Solo puede editar archivos PNG utilizando un software de edición de tramas.

Aquí hay un archivo SVG de ejemplo de Mozilla Developer Network . Así es como se ve SVG en su forma de código XML nativo:

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Y este código simple representa esta imagen:

Un cuadrado rojo con un punto verde y las letras "SVG" en él.

Los archivos SVG suelen ser más pequeños que los archivos PNG, porque solo contienen los datos necesarios para dibujar la imagen, mientras que los archivos PNG contienen los datos de toda la imagen.

También puede animar archivos SVG usando una herramienta llamada SMIL. Por lo tanto, pueden servir como archivos GIF extremadamente eficientes en el espacio. Y si eres realmente aventurero, puedes programar SVG.

JPEG VS PNG: ¿Qué formato de imagen es mejor para la Web?

La web puede verse muy diferente en el futuro, a medida que implementemos más y más cable de fibra óptica y el Internet satelital de alta velocidad se vuelva más común.

Pero por ahora, mi recomendación es usar archivos JPEG para la mayoría de sus imágenes.

Si tienes el logo de una empresa o una foto muy importante donde la calidad es vital, PNG es una buena opción.

Para los logotipos, recomiendo usar un SVG, ya que se escalará infinitamente y tiene un tamaño muy compacto.

Espero que hayas aprendido mucho sobre los tipos de archivos de imagen.

Fuente: https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/

#svg #jpeg #gif #image