Christopher Fleming: you can also splice them if they are in the theme as background images etc but that is usually pushing it lol
Michael Martinez: What do you want to optimize the image for? How it fits into a page of specific or variable dimensions? How it appears when viewed? How long it takes to download?
Steve Wiideman: 1. Image name (/images/car-accident-lawyer.jpg)
2. Reduce file size without noticeably different quality
3. Maximize file meta data (don`t listen to naysayers, I have data)
4. Wrap in schema.org/ImageObject
5. Alt text that describes the image (don`t stuff keywords)
6. Title attributes that describe where they go if they click (anchor tag only, not IMG tag)
7. Captions, where it still provides a good user experience
8. Image sitemap (Yoast does this by default now I believe)
9. Syndication (where applicable, such as Pinterest, Flickr, social)
10. Within Twitter Cards and Open Graph tags that assist in defining the image
I can go on, but those are the top 10 I know of.
Doc Sheldon: Use the right image format (jpg, png, svg), size it properly for the required display per viewport, choose proper resolution, compress the file, combine if appropriate (sprite), proper loading sequence, proper image caching...
Benj Arriola: So many ways and many already mentioned above. Just a few more things that are more Infographic sharing specific.
1) Some image thumbnails when clicked on will use an overlay modal, like a lightbox. And by default most will set it to 100% to fit the image in the screen. Some people forget that infographics can be super long and clicking on the thumbnail for a very long image at 100% of the screen height will just make it smaller, make sure the lightbox modal is at 100% width instead with an up/down scroll bar.
2. Always provide embed codes before making it live. The embed code obviously also has the code with a link going back to the blog post on your site where the Infographic is posted.
4. Put social sharing buttons above and below the Infographic or the ones that like float on the screen as you scroll and stays in position. Most of the time people decide to share the Infographic at the very beginning or when they reach the very end. Might as well remind he user wherever they are by simply presenting the buttons.
5. Customize your OG-Image tags properly. Like in the Infographic example, if not configured Facebook may decide to use that image when shared and if it is the whole Infographic, then it will look very small in the FB.
6. For people that decide to steal images... they will always find a way to just save it and they will post it themselves on their own site. So I still like adding an identifying URL on the image itself. So if there are curious people that want to know the source, at least they know where to go.
7. For popular images on your site that you own but people are just stealing and using... I suggest always do a reverse image search on Google from time to time. If you find a site using your image without any credit, permission or link... then reach out to them and ask for credit and a link.
Mal Ö Tonge: Images are one of the most important factors in your web build and poorly optimized images can see your website plummet to the land that google forgot, So many times I see people optimizing keywords in there onpage text but fail to do the same for there images. One of the main cause to bounce rates is also poorly optimized images, I had a client who had a 19mb image on his home page and wondered why his site was so slow. Its the most common mistake. here is a list of what I do to fully optimise / optimize images for web apps.
1: Resize the image to the actual size that will be used. The last thing you want is the browser needing to re-render images and taking more time to display the page.
2: Compress the image, Personally I only use JPG, unless I require transparent images then I will use PNG. For JPG compression the best software I have found and also completely free open source is "Caesium" they have 2 versions one for Lossless and lossy. I like this software so much because I can just throw 100k images into it, set the compression settings and away it goes and does its thing. This is available on Windows and Mac.
3: after compression the next step is to optimise the images for titles, In Windows, Right click the JPG and go to properties, then click the Details Tab. once inside you will see all sorts of data that you can add to your images, fill in what data you think necessary, Most will just fill the name, If you are using Wordpress then this will create the title based on the image name. Its takes time and alot of work but well keyword targeted images are a must.
4: Onsite you then need to create keyword targeted alt tags, and descriptions. this should be relevant to the image and the post or page that the image is on.
Hope this helps someone, Need and help in site optimization including external JS like youtube and analytics, Database indexing or just plain old image optimization then be sure to contact me.
Take Care Guys!
JL Faverio: I noticed no one mentioned geotagging. Is that no longer a thing?