Publishing graphical content
A plan is nothing, planing is everything
The first question is: where does the image come from ? Is it a picture taken with your camera, is it web content, is it a screenshot ?
The second question is: who owns the content ? Do you have the rights to use it ?
Capture
Camera
As I explained for the video capture, it depends on what you want to record. Do you want to show something you do (like soldering, ..). Then, the best approach is to build a small setup with a camera on the top. Most of the time, my iPhone is just perfect
Light
I bought a nice kit last year. This is not pro stuff but it looks great. It help a lot to build a nice place with a lot of light and no dark areas. Click here for more...
Screenshots
I use Flameshot. Click here to learn more about the tool. To install it, simply use apt-get. Flameshot has a wide set of nice features, like:
- Capture any area of the screen
- A lot of options for auto-naming (I prefer a datetime stamp)
- Capture and edit the image (using a pencil, a line, a rectnagle, ..) to highlight some content before saving
- Picture width and height are visible, so you can standardize the output
Post processing
GIMP
GIMP is a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks. Click here for more information
ImageMagick and Convert
Sometimes, you have to change file format, image resolution and/or size to fit your web site requirements. Use the convert program to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. Click here for more information.
Reduce footprint and increase performance
Trimage is a cross-platform GUI and command-line interface to optimize image files (PNG and JPG) for website. Click here for more information. You can install it using apt-get.
"Convert" is a tool that helps to reduce the footprint as well
- list formats: convert -list format
- convert JPG to PNG: convert input.jpg output.png
- convert all JPGs to PNGs: mogrify -format png *.jpg
- convert SVG to PNG at 1000 DPI: convert -density 1000 -units PixelsPerInch input.svg output.png
- compress JPG to quality 50% width 1000: convert input.jpg -quality 50% -resize 1000 output.jpg
- compress all JPGs to quality 50% width 1000: mogrify -quality 50% -resize 1000 *.jpg
Publish
HTML standards
In HTML5, The img tag defines an image in an HTML page. The img tag has two required attributes: src and alt. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The img tag creates a holding space for the referenced image. Tip: To link an image to another document, simply nest the img tag inside a tags. Here is a code sample:
