What Is the Best Mediym to Upload Pictures

The Ultimate Medium Prototype Guide

Bonus tip: how to set up a focal signal on any image

Photograph by Héctor J. Rivas on Unsplash

Articles with images get 94% more views than those without. On Medium specifically, images are as well used to catch the attention of your potential reader when they're scrolling through their feed. Images are super important, whether as a preview of an article or every bit inline content.

There is an official Medium Epitome Guide that explains handling images in Medium, but information technology is non really comprehensive, and it doesn't comprehend important subjects like compression and the optimisation of GIF files.

Then I thought I'd come up up with my ain Ultimate Medium Image Guide, which should help you lot take care of images in your articles like a pro.

Let'southward go straight to information technology.

Optimise Your Images

Something fundamental to understand near images is this: If you lot practise non optimise your images, they will take longer to load in your article. You've probably seen those before:

This epitome is supposed to be blurry. Don't expect for it to load.

Medium shows a blurry preview while it loads the epitome. That'south non optimal, considering people don't similar to wait.

Let's look at a few tips to make this faster.

Yous don't need anything above 1060 pixels wide

A lot of authors download pictures from free photo websites and import them straight into Medium. This is non best practise, considering the images from these websites are usually huge, high definition pictures. It's totally unnecessary and information technology highly impacts load time.

Here are the four dissimilar placement types available for images in Medium:

From left to right: floating, full column-wide, out-set, and screen-width. Here are medium's recommended sizes for each placement blazon:

Floating: no requirements mentioned
Full cavalcade-width images: 1400px wide
Out-gear up images: 2040px wide
Screen-width images: 2500px wide

From these guidelines, we can see that anything above 2500px is unnecessary. I never employ annihilation above 1200px. Medium does accept this notation in their paradigm guide:

Note from the official Medium Image Guide

However, when I effort uploading an image that is 1060px broad, I practise not accept access to all the placement options. I exercise with 1200px though. Something to investigate?

How to resize images

Use simpleimageresizer.com
Choose a new size using dimensions, not percentages
Enter 1060px in width, and nada in superlative. Everything else is automated.
Click on "resize" and download your epitome

Medium settings for resizing any paradigm

Shrink Your Images

On top of making your paradigm smaller, you volition want to make it lighter.

This is Medium'due south note from their official image guide, regarding prototype sizes:

25MB is absolutely gigantic, enormous, unnecessary. Here is my rule of pollex when compressing images. They should be:

Definitely under 1MB
Preferably nether 500KB
Ideally nether 100KB

How to compress images

Use optimzilla.com
Upload your file, wait for it to compress
Download

Tip: Y'all can batch-compress by drag-and-dropping multiple files to the surface area that says "Drop your files here." Then, click on "Download all", and y'all will get all your files at in one case in a ZIP folder.

Compress Your GIFs Too

GIFs are really images, but you tin't use the same technique to compress them. The problem with GIFs is that they can go heavy very easily. Here are the chief factors that will affect your GIF size:

Frame rate (images per second)
Dimensions (in pixels)
Number of colours (256 is the maximum)

If you go your GIF from an existing source, it will probably exist already optimised for web use. But if you brand your ain, hither is how to compress the final event.

How to compress GIFs

Use ezgif.com cropping, resizing and optimising tools.
Ingather any unnecessary parts of the gif:

Resize the gif. Don't go to a higher place 800px. Go out height value empty.

Optimise the GIF. If needed, you lot can compress it more. You can besides remove some frames to reduce the frame rate, which does wonders at reducing the size. You take tons of options bachelor, simply I recommend you just stick to those three: color reduction, remove every 2d frame, and lossy GIF.

Think Mobile

Over 50% of internet traffic comes from mobile phones. When you import images in your article, think of your mobile readers, which brand upwards nigh of your audition.

Your images need to be piece of cake to empathize. What does that mean? Look at this example:

The second image looks much better. There's more space to quickly understand the picture, more context, and the aspect ratio is more aesthetic.

Aspect ratios

In general, don't go for wide and low aspect ratios. Go for these:

16:9
4:3
i:one

They're the near used, and also generate improve previews when your commodity gets shared on social networks. Facebook, Linkedin, Instagram, Twitter — all of them use the iii most common size ratios, or ratios really shut to them. The only reason they don't go for the verbal ratios is to have "proprietary" formats, to be different.

Facebook prototype dimension when sharing

Link to Your Sources

Linking to your sources gives credit to the author of the picture (which is always nice to exercise) and adds more than credibility to your commodity. Especially when using images from websites that are not free prototype providers, it is really important to link back to where you got the content, as you could get in trouble if yous don't. You lot'd be surprised how easy it is to commit copyright infringement.

On a practical level, publications adopt manufactures that link to their sources.

How to link to your sources

Simply add a link to the URL where you got the picture show from. In paradigm captions, you can add links like you would in a regular paragraph.

If you desire to link the whole epitome to an external source, select your image and striking ⌘+Thousand on Mac, or Ctrl+Thousand on Windows. The editing bubble will appear and y'all only have to paste your link inside.

Try to Have a Theme

Don't brand your commodity a collage of pictures that don't go together. Especially in UX and design publications, the authors are really good at making content that looks skilful from head to toe.

You can use a theme across the images in your blogpost with colors, subjects, framing, or people. Information technology's always better to try and create an identity for your content, even if you didn't design the images in the showtime place.

Learn the Basics of Photograph Editing

Learning the basics of photo editing or image creation can get a long style to creating your own identity. Yous don't demand a lot to be able to brand cool visuals that people will instantly recognise are from you, and just you.

Adobe Photoshop is widely used and has definitely get more than affordable over the years. Information technology will cost you around $twenty per calendar month depending on where you live (offers vary).

Adobe Illustrator is too used a lot, for vector illustrations. Information technology costs around the aforementioned equally Photoshop.

If y'all want to get the free mode, at that place are a lot of tools for you to try out in that location, the nigh popular beingness Canva. It wants to be similar Photoshop, but it will never be as good. Yet, it's definitely enough to get you started. You don't need a powerful laptop to run it, because it's cloud-based. If you ever decide to switch to Photoshop, you won't observe information technology hard, considering the 2 interfaces are really similar.

Bonus Tip: Focal Indicate

Not a lot of people know this, only you can set a focal point on your images to crop them amend for social media thumbnails and preview content on Medium.

By default, all focal points are set to the exact centre of images. This tin make some pictures lose their context when cropped for preview.

Here is how to gear up a unlike focal point, from the official Medium Featured Paradigm guide:

Concord Opt on Mac, Alt on Windows
Click on the image in the place where yous want your focal betoken to be
The resulting light-green circle will serve as a focal point for automated paradigm cropping that appears in post listings and previews around the site

baileyrother.blogspot.com

Source: https://bettermarketing.pub/the-ultimate-medium-image-guide-d15b2d1a84e8